1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 电脑桌面怎么设置html背景图 css中如何设置背景图片?

电脑桌面怎么设置html背景图 css中如何设置背景图片?

时间:2019-12-29 09:41:48

相关推荐

电脑桌面怎么设置html背景图 css中如何设置背景图片?

在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。

css怎样设置背景图片?

css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。

下面看看background可以设置的属性:background-color: 规定要使用的背景颜色。

background-position: 规定背景图像的位置。

background-size: 规定背景图片的尺寸。

background-repeat :规定如何重复背景图像。

background-origin :规定背景图片的定位区域。

background-clip: 规定背景的绘制区域。

background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image :规定要使用的背景图像。

可以看出background-image属性就是给html页面设置背景图片的属性,下面看看它的用法background-image:url(1.jpg);

这样在url()里给出图片的路径,就可以给div盒子设置一个背景图片;看似简单,但有一点要注意,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示。

上面的这些background属性如果一个一个的设置是不是感到繁琐,其实有些属性是可以放在一起设置的,这样的css背景表达可以节约且优化了css文件代码。例:background:url(bgimg.gif) no-repeat 5px 5px;

如下图解释:

css设置背景图片的代码实例

1.css设置背景图片自适应全屏

背景图片设置

.demo{

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

z-index:-10;

zoom: 1;

background-color: #fff;

background: url(2.png);

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。