css background-image如何平铺?

黄舟
Lepaskan: 2017-06-21 16:16:57
asal
15832 orang telah melayarinya

以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了一个div只能设置一个背景的问题,使一个div可以设置多个背景图片。background-image还可以设置线性渐变,等效果。

关于css3的background,功能很强大,有很多属性,像background-size等等,这些属性都可以写一篇博客来讲述。关于css3background的其他属性,后面会出博客来单独讲述!

CSS3/CSS1 background-image 属性

语法:

background-image:<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
Salin selepas log masuk

默认值:none

取值:

none:无背景图。

< url >:使用绝对或相对地址指定背景图像

< linear-gradient>:使用线性渐变创建背景图像。(CSS3)

< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)

< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)

< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)

说明:

设置或检索对象的背景图像。

如果设置了background-image,同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。

CSS中如何设拉伸背景图片铺满屏幕

我写的CSS代码是

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}
Salin selepas log masuk

这样子他会重复图片铺满屏幕,我想要让他拉伸图片铺满屏幕,应该怎么写呢?

background:url(images/beijing.png) repeat;
Salin selepas log masuk


加个属

background-size:100%;background:url(images/beijing.png) no-repeat;
Salin selepas log masuk

加个属background-size:100%;background:url(images/beijing.png) no-repeat; 图片会失真哦!

要么是外框限制了,都设成100%,我这里试验了下是铺满的,你再看看有没有别的属性影响了的。

Atas ialah kandungan terperinci css background-image如何平铺?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan