CSS中的背景图片的知识点深度
在理解css的背景图片之前需要清楚两个问题,在什么情况下去使用css的背景图片?又在什么情况下去使用img标签的内容图片?html中专门有一个img标签用于向页面中去插入内容图片,那么如何区分这两种情况呢?
网页中可以使用很多的图片格式,下面简单的列举一些:
background-position 属性既可以使用关键字,也可以使用像素、em、百分比,最简单的情况下:可以给两个值,一个表示相对于左侧的偏移量,一个表示相对于顶部的偏移量。
calc()可以让浏览器代替你计算任何数值,包括(角度、像素、百分比等),甚至还支持混合单位的计算,非常强大,比如:你使用的页面布局为百分比布局,但是在UI设计稿中又需要去进行20px的偏移,那么就可以写成“calc(100% + 20px)”。
同样的,背景图片右侧定位的问题也可以使用calc()去处理,比如:左侧为文本内容,右侧icon图标的定位。
默认的情况下,背景图片是绘制在元素边框以内的,如果把图片定位到边框的下方,而边框又被设置为半透明,那么图片边缘就会出现半透明的边框,使用background-clip属性可以处理这种情况,background-clip:border-box将其改为padding-box就可以把图片剪裁到内边距盒子内,content-box值会把图片位于内边距及其之外的部分剪裁掉。
背景会附着在指定的元素后面,如果滚动页面,那么背景也会随着页面的滚动而滚动,通过background-attachment属性改变这种行为。
除了fixed和默认值scroll,还可以把background-attachment设为local,它与scroll的区别在于,scroll会让图片相对于元素本身固定,而local会让背景图片相对于元素中的内容固定,也就是元素设置了固定大小,overflow设置了auto或scroll,则元素内部内容滚动显示时,图片会随之滚动。
background-size明确指定一个值,可以重新设置图片大小,也可以让它随着元素大小缩放.
如果希望图片随着元素的缩放而缩放,则必须设置为百分比的形式,不过,百分比设置时不是相对于图片固有的大小,而是相对于容器的大小,如果给图片的宽高都加以百分比的形式处理,那么会导致图片产生变形。
还有一个属性值contain,这个值会让浏览器尽可能的保持图片的最大化,同时不改变图片的宽高比,浏览器决定哪一边使用auto。
另一个属性值为cover,意思是图片会缩放,覆盖整个元素,同时不会变形,如果在一个高而窄的元素中,元素高度会填满,但是图片的两边会被切除掉。
CSS如何添加背景图片
通过css:background-image语句设置背景。
background-image 属性会在元素的背景中设置一个图像。根据background-repeat属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。初始背景图像(原图像)根据background-position属性的值放置。
(1)相对的文件位置:
(2)测试代码:
测试效果:
扩展资料:
background-image 属性为元素元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
参考资料:百度百科--CSS background-image
CSS 背景图片虚化
背景图片虚化主要依靠的是 filter: blur(15px); 这个css属性
blur值 越大 模糊程度也越大
最终我们希望的效果图是这样的
实现方式:
第一步 一个大的 div 里面包裹两个 小的 div1 和 div2
第二步 div1元素加入背景、宽高、过滤(filter)、浮动
第三步 div2元素 开启定位 absolute(一定要脱离普通文档流)
现在基本的效果就实现了,想让页面更美观 剩下的就要自己动手喽
关键点就是
filter属性 :让图片模糊
脱离普通文档流 :内容放到模糊div1 的上面
CSS样式表控制背景图片大小
可以通过background-size属性来设定背景图片的大小。它可以是像素(px)或者是百分比(%),举例说明:background-size:950px* 200px这表示把背景图片大小调整为宽度950像素,高度200像素。
1、background-size的语法说明:
(1)属性名:background-size
(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain
(3)初始值:auto auto
(4)应用于:所有元素
(5)继承性:无
(6)百分比:后面会说明
(7)计算值:根据指定
2、代码说明:
/* 一个值: 这个值指定图片宽度,第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景,用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但必须用逗号隔开。 */
background-size: auto, auto /* 请区别于background-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
扩展资料:
背景重复:
如果需要在页面上对背景图像进行平铺,可以使用background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
背景图像将从一个元素的左上角开始。如下:
body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}
背景定位:
可以利用background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
参考资料来源:w3school:CSS 背景
怎么用css把背景图片拉伸 不是平铺
1、首先准备一张设置为背景的图片,这边准备的是一张650px*347px的图片。
2、然后建立一个html文档,将它和背景图片放到一个文件夹中。
3、编辑html文档,这边建立一个div,设置宽度为700px,高度跟背景图一样,为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了,这不是想要的效果。
6、然后可以给div再加上属性,-moz-background-size:100% 100%; background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。
css怎么调整背景图片的位置?
1、首先打开前端开发工具,新建一个html代码页面。
2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。
3、设置背景图片。创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。
4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。
5、回到html代码页面,在bg-img类里添加background-position: center的属性。
6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。
背景图片css 背景图片css代码宽高
Css设置背景图片不显示的问题
1、打开html开发软件,新建一个html代码页面。
2、在html代码页面的
标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。3、设置背景图片样式。在