消失的那么快
纪念我的放肆
当前位置:首页 > .html

怎么在css上设置背景图

作者:ling发布时间:2023-04-07 14:38分类: 网页设计 浏览:12评论:0


导读:背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 CSS3的背景图片大小可以写...

背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。


CSS3的背景图片大小可以写成 background-size:Apx Bpx;
-Apx = x轴(图片宽度)
-Bpx = y轴(图片高度)

了解了这些,我们开始体验这个特性吧:
最好支持CSS3背景大小的浏览器是Safari和Opera,所以我们只需要使用-o和-webkit前缀。

背景大小

body
{
    background-image:url(/content/uploadfile/202304/38b71680850826.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0px 0px;
   background-size:cover;
   -moz-background-size:60px 100px; /* 老版本的 Firefox ,请自行添加各个浏览器前缀 */
}

background-image:背景图地址;

background-repeat:图片是否重复;

参数:

repeat-x:横向重复;

repeat-y:纵向重复;

no-repeat:不重复;

默认是横向和纵向都重复,这里大家可以自己试下效果。

background-attachment:设置背景附着属性;

参数:

scroll:表示随内容滚动而动;

fixed:表示固定不动,不受内容滚动影响;

默认是scroll,这里大家可以自己试下效果。

background-position:设置图片位置;即设置图片左上角坐标点的X轴和Y轴值,这里不需要设置,默认值为0;

background-size:设置图片的尺寸;

参数:

| :分别用长度值和百分比来指定图片的大小。不允许负值。background-size: 10px 10px; background-size:100% 100%; auto :背景图像的真实大小。 cover :将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 contain :将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 主要就就是对以下属性的运用: [ background-image ]: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像” [ background-repeat ]: 指定对象的背景图像如何铺排填充。 [ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固定的。 [ background-position ]: 指定对象的背景图像位置。 [ background-origin ]: 指定对象的背景图像显示的原点。 [ background-clip ]: 指定对象的背景图像向外裁剪的区域。 [ background-size ]: 指定对象的背景图像的尺寸大小。 将上述实现代码新建一个CSS类,然后在html的 head 里面引用即可实现; 引用方法:

发表评论: