首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */ height: 2000px;...font-style font-weight font-size/line-height font-family;} CSS 背景也可以进行进行简写 , 语法格式如下 : background: pink...: 背景颜色 背景图片 背景平铺 背景滚动 背景位置 2、代码示例 核心代码 : /* 背景简写方式 */ background: transparent url(images/bg.jpg...) no-repeat scroll center top ; 完整代码示例 : <!

2.7K10

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

文章目录 一、背景颜色 1、语法说明 2、代码示例 二、背景图片 1、语法说明 2、代码示例 三、背景平铺 一、背景颜色 ---- 1、语法说明 CSS背景颜色样式语法 : 默认的背景颜色是...: 直接使用 颜色的英文名称 , blue , red , green ; 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ; RGB 代码颜色...代码示例 : <!...: 二、背景图片 ---- 1、语法说明 CSS背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ; background-image:...url(相对路径); 在 url() 中设置相对链接 url() 中的链接没有双引号 2、代码示例 代码示例 : <!

5.8K20

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

文章目录 一、背景半透明设置 1、语法说明 2、代码示例 一、背景半透明设置 ---- 1、语法说明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是...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...-方位值设置 ---- 1、效果展示 效果展示 : 设置背景位置为 右上角 : 粉色区域是盒子的区域 , 图片背景位于盒子右上角 ; /* 设置背景位置 - 右上角 */ background-position...; 设置背景位置为 左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; 设置 bottom left 和 left bottom 效果是一样的 ; /* 设置背景位置 - 左下角 */...水平方向居中 ; /* 设置背景位置 - 指定一个值 另一个默认居中 */ background-position: top; 2、完整代码示例 完整代码示例 : <!

4K20

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 属性规定背景图像的尺寸。

93320

CSS背景(background)

为了可读性,建议大家如下写: background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 语法: background: transparent url(image.jpg) repeat-y...背景透明(CSS3) 语法: background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha 透明度 取值范围 0~1之间 我们习惯把0.3的0省略掉 这样写 background...: rgba(0, 0, 0, .3); 注意: 背景半透明是指盒子背景半透明,盒子里面的内容不受影响 因为是CSS3 ,所以低于 ie9 的版本是不支持的。...背景总结 属性 作用 值 background-color 背景颜色 预定义的颜色值/十六进制/RGB代码 background-image 背景图片 url(图片路径) background-repeat...如果有 精确数值单位,则必须按照先X 后Y 的写法 background-attachment 背景固定还是滚动 scroll/fixed 背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动

1.4K20

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

文章目录 一、背景附着 1、语法说明 2、背景固定效果展示 代码示例 效果展示 3、背景滚动效果展示 代码示例 效果展示 一、背景附着 ---- 1、语法说明 背景附着 用于设置 背景图片 是...可滚动的 还是 固定的 ; 使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 : background-image: url(images/xxx.jpg); 背景附着 语法如下...与 网页内容 绑定 , 网页滚动时 , 背景图像也进行滚动 ; fixed : 背景图像 固定 , 滚动网页时 , 背景图像位置保持不变 ; 2、背景固定效果展示 代码示例 背景附着测试 背景附着测试 效果展示 默认打开的样式如下 : 滚动后 , 背景位置不变 , 只是内容被滚动上去了 ; 3...、背景滚动效果展示 代码示例 <!

1.4K20

CSS】:颜色、背景

背景(Background) 2.1. 背景色(background-color) CSS属性中的 background-color 会设置元素的背景色。...背景图(background-image) CSS background-image 属性用于为一个元素设置一个或者多个背景图像。 常用语法: background-image: url("....背景重复方式(background-repeat) CSS 属性 background-repeat 定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。...背景粘附(background-attachment) background-attachment CSS 属性决定背景图像的位置是在视口内固定,还是随着包含它的区块滚动。 2.9....几道笔试题 题目01: 题目02: 题目03: 题目04: 题目05: 题目06: 题目07: 题目08: 参考: 《CSS 世界》 《CSS核心技术详解》 《CSS权威指南 第四版 上册》 color

2.8K21

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

文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着..., 使用简写方式 , 设置图片链接 , 与 图片的平铺模式即可 , 不需要设置其它样式 ; background: url(images/bg_bt_orange.png) no-repeat; 部分代码示例...- 简写 */ background: url(images/bg_bt_orange.png) no-repeat; } 4、设置鼠标经过样式 鼠标经过时 , 文本颜色变为白色 , 背景图片变为其它背景...鼠标经过 样式 */ a:hover { background-color: red; color: white; /* 背景图片设置 - 简写 */ background...: url(images/bg_bt_blue.png); } 二、完整代码示例 ---- 1、代码示例 代码示例 : <!

4.3K20

CSS3背景

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

98430

【iOS开发】生成高斯模糊效果背景

做开发时,总是使用系统默认的白色背景会显得有些生硬,所以当我们以展示图片为目的时,不妨将图片放大、再做高斯模糊处理以作为背景。 我把这个处理过程用 Swift 封装成了一个函数,供大家参考。...//创建高斯模糊效果的背景 func createBlurBackground (image:UIImage,view:UIView,blurRadius:Float) { //处理原始NSData...let blurImage = UIImage(CGImage: context.createCGImage(result, fromRect: result.extent())) //将模糊图片加入背景...self.view.frame.height let blurImageView = UIImageView(frame: CGRectMake(-w/2, -h/2, 2*w, 2*h)) //模糊背景是界面的...View的下层 } 三个参数分别为:image(原始清晰图片)、view(你需要将生成的模糊背景插入在这个view的下层当做背景)、blurRadius(高斯模糊处理的模糊半径) 其中 let context

2.2K20
领券