在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
CSS背景属性回顾 背景单个属性 background-image background-color background-repeat background-position background-attachment...背景符合属性 background 注意:复合属性会覆盖前面的单个属性,反之则不会 背景定位的扩展 在CSS3中,背景定位得到了扩展,它允许我们指定背景图片在距离任意角的偏移量,只需要在偏移量前面指定关键字...也可以使用background-origin:content-box实现 CSS3新增背景属性 背景尺寸:background-size 设置背景尺寸 background-size background-size...background-image background-image:url(1.jpg),url(2.jpg); 多个背景以逗号隔开,无限个数 背景起始区域 background-origin...:padding-box; //从padding区域开始显示背景 background-clip:content-box; //从内部区域开始显示背景 新增颜色与背景渐变 新增背景色
本篇文章给大家介绍html背景图片自适应窗口大小的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。...background-size:cover 会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background
在设置login背景时,找到了一张这样的图片: ? 但是设置成login背景时,如果没有做一些css适应设置,图片就变样了,变成了这样: ? 严重变形了,这就造成了一种理想与现实的差距。...若想解决这个自适应问题,其实很好解决,只需要在前端代码里加上这样css即可: 1 .main { 2 background: url(..
CSS3背景 控制网页中所有场景的背景,包括背景颜色、背景图片等等; background-size属性 顾名思义:background-size属性规定网页中背景图片的尺寸。...在CSS3之前,网页中背景图片的尺寸往往是图片的实际尺寸,我们无法在网页中规定它的大小尺寸。但是在CSS3中我们可以规定它的尺寸,方便了我们在网页中使用不同尺寸但相同图片的背景。...DOCTYPE html> CSS3学习 <style...background-origin: border-box; 供参考 CSS3多重背景 多重背景:可以为元素块设置多个背景。...多重背景属性的值越在前,则在网页中位置最靠前; 多重背景代码: background-image:url(bg1.png),url(bg2.png); 效果图: 单个背景代码: background-image
html 图片自适应窗口大小 background-size:cover 会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width
一、CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有...padding的时候,content-box和padding-box效果一样*/ 兼容性:IE9+、FireFox、Chrome、Safari、Opera 二、CSS3 背景图像定位 background-position...|border-box|content-box; 兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera 三、CSS3 背景图像大小 background-size...(指定背景图片大小) background-size: px / % / cover / contain; /*cover:把背景图片扩展至足够大,以使背景图片完全覆盖区域(即完全不留白) contain...:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域(至少满足一边不留白)*/ 兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera 四、CSS3 多重背景图像
/*兼容安卓手机没有高度导致无法显示背景图片*/ html,body{ width:100%; height:100%; } body { background: url(../..
灵活的背景定位 实现效果: 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。 ?...条纹背景 水平条纹 实现效果: ?...,该背景图分为上下不同实色的两部分,占满容器大小。...复杂的背景图案 网格 实现效果: ?...摘自:《CSS揭秘》 第 2 章 背景与边框
background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" > 第一行是图片url 第二行是背景图片不重复
DOCTYPE html> CSS3实现各种纹理背景效果_网页代码站(www.webdm.cn) body{font-family: Georgia...solid #ccc;font-variant: small-caps;} Stripes & other patterns with CSS3
在项目中有很多地方可以用到背景色的渐变,例如:左侧菜单栏的背景色,顶部导航栏背景色等等。...CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。...但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。...CSS3 线性渐变 为了创建一个线性渐变,你必须至少定义两种颜色结点。...background: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下(默认情况下) 示例代码如下: 设置背景色从上面红色到下面蓝色的渐变
二、CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ? ...背景渐变模式 将上述四种渐变效果混合就可以创造各种背景渐变模式了!国外CSS高手的设计:http://lea.verou.me/css3patterns/ 示例 ? ...三、IE5.5~9的背景渐变 由于IE5.5~9不支持CSS3的渐变特性,因此需要使用IE滤镜进行处理,而且IE的渐变滤镜仅提供从left到right,和从top...四、SVG的背景渐变 SVG可谓是我最期待的新特性。下面了解一下SVG下的背景渐变。 线性渐变示例——彩虹 ? 代码: <?...六、参考 《HTML5秘籍》8.4.5.渐变盒子 《响应式Web设计:HTML5和CSS3实战》6.3.背景渐变,6.4.背景图渐变 CSS3 的线性渐变
有时候需要给网页加背景图,于是在网上找了一段CSS代码,上一篇利用JS转跳网址里面就加入了这段CSS 上一篇一开始的背景图代码是这个 但是直接引用JPG文件背景图不能自适应,晚上自习在想能不能用CSS来实现自适应,就找到了这个CSS代码,记录一下以防备用。
一、背景大小 background: url("images/bg.jpg") no-repeat; 控制背景的大小 1、具体数值 background-size: 500px 500px; 2、百分比...,但不一定能铺满盒子 background-size: contain; 二、全屏背景自适应 1 body{ 2 background: url("images/2.jpg")...no-repeat center; 3 /*background-size: 100% 100%;*/ 4 background-size: cover;/*全屏背景自适应...*/ 5 } 三、背景原点 background-origin 背景原点 控制背景从什么地方开始显示 1 .box{ 2 width: 500px; 3...给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开 1 .box{ 2 width: 624px; 3 height: 416px; 4
对于css来说很多人都会陌生,但是对于站长来说却很熟悉,毕竟搭建一个网站不可能不会用到css,今天整理了一下我自己比较喜欢的网格背景效果,我这个人有时候喜欢简约有时候喜欢花哨,而且每个人对于美的标准都是不统一的...网格背景 效果图: css代码: .content { width: 100%; max-width: 100%; position: relative; background-image...条纹背景 效果图: css代码: .content { background: linear-gradient(rgba(249, 165, 165, 0.5) 50%, rgba(255, ...233, 185, 0.62) 0); background-size: 100% 20px; } 背景颜色都建议自己修改,20px是每个横线的高度,可以适当增加或者缩小。...后记 关于网站背景css效果还有很多,文章记录的仅仅是九牛一毛都不算,只是记录几个自己喜欢的,能用的到的,也算是为了水一篇文章吧,有喜欢的就收藏吧,有问题留言反馈!
在CSS3中,新增了很多长度单位,今天就来谈谈: vw、vh、vmin、vmax 1.什么是视口?...2.视口单位:根据CSS3规范,视口单位主要包括以下4个: (1)vw、vh vw是相对视口(viewport)的宽度而定的,1vh 等于1/100的视口高度, 假如浏览器的宽度为200px,那么1vw
background-size: contain; background-repeat: no-repeat; background-position-x: c...
废话 我的博客采用的是solstice23大佬的Argon主题,这个主题有一点缺陷,就是不能为手机和电脑单独设置页面的背景图,因为这点小原因,我也不好意思去找原作者。...首先我在浏览器的开发者工具中查看,我发现背景图相关的代码在这 我通过在元素中搜索现在的背景图地址,发现他位于ID为content之前插入的伪元素下的background属性中。...,就返回电脑的图片,如果屏幕的宽度小于屏幕的高度,就返回手机的图片 但是因为我懒 所以我选择媒体查询 我选择更换手机的背景图 我将主题后台设置中的背景图地址先改为电脑的,然后在WordPress的额外css...,于是我尝试将这段css插入页脚中,背景图设置成功。...解决方法 先在Argon主题的设置中将背景图的地址设置为电脑端访问看到的图片 然后在Argon主题设置的页脚内容或页尾脚本中加入以下代码 @media (max-width: 768px
根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1%。
领取专属 10元无门槛券
手把手带您无忧上云