首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSSCSS 背景设置 ⑦ ( 背景简写 )

文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...定位方式 , 附着方式 等 , 下面是一个完整图片背景设置代码 , 代码很繁琐 ; body { /* 设置一个足够高高度, 让页面滚动起来 */ height: 2000px;...: fixed;*/ /* 背景滚动 */ background-attachment: scroll; } 类似于 文本样式字样样式综合写法 方式 , 选择器 { font:...font-style font-weight font-size/line-height font-family;} CSS 背景也可以进行进行简写 , 语法格式如下 : background: pink...url(image.jpg) no-repeat scroll center top ; background 属性值 各种背景样式属性顺序 没有进行强制定义 , 这里 建议按照如下顺序进行编写

2.7K10
您找到你想要的搜索结果了吗?
是的
没有找到

CSSCSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

文章目录 一、背景颜色 1、语法说明 2、代码示例 二、背景图片 1、语法说明 2、代码示例 三、背景平铺 一、背景颜色 ---- 1、语法说明 CSS 背景颜色样式语法 : 默认背景颜色是...transparent 透明 ; background-color:颜色值; background-color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 : 预定义颜色 : 直接使用 颜色英文名称...: 二、背景图片 ---- 1、语法说明 CSS 背景图片样式语法 : 背景图片链接需要写在 url() 中 , 并且 url() 中链接可以没有双引号 ; background-image:...url(相对路径); 在 url() 中设置相对链接 url() 中链接没有双引号 2、代码示例 代码示例 : <!..., 使用图片像素是 200x200 像素 , 设置到 200x200 盒子中 , 正好充满整个背景 ; 但是如果设置到 400x400 像素盒子中 , 就会出现如下样式 , 背景会重叠展示多个

5.8K20

CSSCSS 背景设置 ⑨ ( 背景半透明设置 )

文章目录 一、背景半透明设置 1、语法说明 2、代码示例 一、背景半透明设置 ---- 1、语法说明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是...设置黑色背景 , 透明度为 20% ; background: rgba(0, 0, 0, 0.2); 颜色透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的...0 , 直接使用 .x 作为透明度值 , 如 : background: rgba(0, 0, 0, .2); 背景半透明 指的是 盒子背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示内容不受背景影响..., 照常显示 ; 2、代码示例 在第一个盒子中 设置背景颜色 : background: rgba(0, 0, 0, .2); 在第二个盒子中 设置背景颜色 : background: rgb(0,...0, 0); 界面的总体背景是黄色 , 在第一个半透明背景盒子中 , 可以看到背后黄色背景 , 第二个不透明背景盒子中 , 黄色背景被完全覆盖 ; 代码示例 : <!

3K20

CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

文章目录 一、背景位置 1、语法说明 2、注意事项 二、背景位置-方位值设置 1、效果展示 2、完整代码示例 一、背景位置 ---- 1、语法说明 如果 盒子大小 大于 背景图片大小 , 默认...图片 位置是 左上角 ; 设置背景位置 CSS 语法如下 : background-position : length length background-position : position position...属性值使用注意事项 : 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ; 方位设置 : 如果设置 position...方位属性值 , 设置是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ; 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关 , left top 与 top...; 设置背景位置为 左下角 : 粉色区域是盒子区域 , 图片背景位于盒子左下角 ; 设置 bottom left 和 left bottom 效果是一样 ; /* 设置背景位置 - 左下角 */

3.9K20

CSS——背景

定义 背景(Background)属性是对HTML元素背景进行定义CSS属性。...概述 通过边框和背景样式设置,给元素增加更丰富外观 背景设置包含以下内容: 背景填充内容 背景填充内容可以是一个固定颜色(background-color属性),可以是图像和渐变(background-image...属性) 背景填充方式 当背景是图像时候,可以指定图像平铺方式(backgroundrepeat属性) 背景填充范围 列表 元素 描述 background background 包括background-color...background-color background-color设置元素背景颜色。 background-image background-image 设置元素背景图片。...background-clip background-clip 规定元素背景背景图片或颜色)绘制区域。 background-size background-size 属性规定背景图像尺寸。

92820

45个值得收藏 CSS 形状

SS能够生成各种形状。正方形和矩形很容易,因为它们是 web 自然形状。添加宽度和高度,就得到了所需精确大小矩形。...添加边框半径,你就可以把这个形状变成圆形,足够多边框半径,你就可以把这些矩形变成圆形和椭圆形。...我们还可以使用 CSS 伪元素中 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状可能性。...通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个 HTML 元素在 CSS 中创建许多形状。...虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到一些技巧及思路是很值得我们学习。 1.正方形 ?

1K20

CSSCSS 背景设置 ⑥ ( 背景附着 | background-attachment )

文章目录 一、背景附着 1、语法说明 2、背景固定效果展示 代码示例 效果展示 3、背景滚动效果展示 代码示例 效果展示 一、背景附着 ---- 1、语法说明 背景附着 用于设置 背景图片 是...可滚动 还是 固定 ; 使用 背景附着 前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 : background-image: url(images/xxx.jpg); 背景附着 语法如下...target="_blank"/> body { /* 设置一个足够高高度, 让页面滚动起来 */ height: 2000px; /* 设置背景图片... 背景附着测试 背景附着测试 效果展示 默认打开样式如下 : 滚动后 , 背景位置不变 , 只是内容被滚动上去了 ; 3...target="_blank"/> body { /* 设置一个足够高高度, 让页面滚动起来 */ height: 2000px; /* 设置背景图片

1.4K20

CSS背景(background)

| url (url) 参数 作用 none 无背景图(默认) url 使用绝对或相对地址指定背景图像 background-image : url(images/demo.png); 小技巧:...如果background-position后面是精确坐标, 那么第一个,肯定是 x,第二一定是y 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中 如果指定两个值是 精确单位和方位名字混合使用...背景图像固定 背景简写 background:属性书写顺序官方并没有强制标准。...背景透明(CSS3) 语法: background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha 透明度 取值范围 0~1之间 我们习惯把0.30省略掉 这样写 background...: rgba(0, 0, 0, .3); 注意: 背景半透明是指盒子背景半透明,盒子里面的内容不受影响 因为是CSS3 ,所以低于 ie9 版本是不支持

1.4K20

CSS】:颜色、背景

具名颜色 如果只想使用基本颜色,最简单方法是使用颜色名称。CSS 把这种颜色称为具名颜色(named color)。...CSS 规范 颜色可以使用红-绿-蓝(red-green-blue (RGB))模式两种方式被定义: 十六进制符号 #RRGGBB 和 #RGB 三位数 RGB 符号(#RGB)和六位数形式(#RRGGBB...背景(Background) 2.1. 背景色(background-color) CSS属性中 background-color 会设置元素背景色。...长度值 长度值是相对于元素背景左上角偏移。 注意,关键字以外值对轴顺序有要求。也就是说,如果使用长度值或百分数值,横向值必须写在首位,纵向值必须写在末位。...contain、cover 如果你想让图像完全覆盖元素背景,而且不在乎有部分图像超出背景绘制区域。此时,可以使用 cover。

2.8K21

CSS 背景(background)

CSS 可以添加背景颜色和背景图片,以及来进行图片设置。...| url (url) 参数: none :  无背景图(默认) url :  使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中(只有CSS3...(CSS3) CSS3支持背景半透明写法语法格式是: background: rgba(0,0,0,0.3); 最后一个参数是alpha 透明度 取值范围 0~1之间 注意: 背景半透明是指盒子背景半透明...背景缩放(CSS3) 通过background-size设置背景图片尺寸,就像我们设置img尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。...一个元素可以设置多重背景图像。 每组属性间使用逗号分隔。 如果设置多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

2.1K20

CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着...行内元素 , 为其设置宽高是无效 , 首先要将其转为 行内块样式 ; display: inline-block; 标签背景图片大小为 120 x 50 像素 , 这里将 标签 也设置成 120x50...标签 高度为 50 像素 , 这里将行高设置成 50 像素即可 ; line-height: 50px; 图片背景设置 , 使用简写方式 , 设置图片链接 , 与 图片平铺模式即可 , 不需要设置其它样式...images/bg_bt_orange.png) no-repeat; } 4、设置鼠标经过样式 鼠标经过时 , 文本颜色变为白色 , 背景图片变为其它背景 , 这里只需要设置需要变化元素即可 ,...其它元素样式默认保持不变 ; /* III.

4.3K20

CSS3背景

CSS3之前我们对背景图片控制极为有限,只能决定其来源、位置、重复,CSS3到来对背景使用开辟了一片新天地。...1、background-size 在 CSS3中,background-size 属性规定背景图像尺寸。这就允许我们在不同环境中重复使用背景图片,以像素或百分比规定尺寸。...percentage: 以父元素百分比来设置背景图像宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。...cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像某些部分也许无法显示在背景定位区域中。 contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。...: 背景被裁剪到内容框 3、多背景 在之前CSS中只能使用一张背景图片,CSS3可以使用多张背景图片 background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat

98130
领券