您的位置 首页 > 数码极客

css如何将png设为背景

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下,图像会重复,以覆盖整个元素。

实例

页面的背景图像可以像这样设置:

body {
background-image: url(";);
}

实例

本例展示了文本和背景图像的错误组合。文字难以阅读:

body {
background-image: url("bgde;);
}

注意:使用背景图像时,请使用不会干扰文本的图像。

还可以为特定元素设置背景图像,例如 <p> 元素:

实例

p {
background-image: url(";);
}


CSS background-repeat

默认情况下,background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示:

实例

body {
background-image: url("gradien;);
}

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好:

实例

body {
background-image: url("gradien;);
background-repeat: repeat-x;
}

提示:如需垂直重复图像,请设置 background-repeat: repeat-y;


CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像:

实例

背景图像仅显示一次:

body {
background-image: url(";);
background-repeat: no-repeat;
}

在上例中,背景图像与文本放置在同一位置。我们想要更改图像的位置,以免图像过多干扰文本。


CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角:

body {
background-image: url(";);
background-repeat: no-repeat;
background-position: right top;
}

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“css如何将png设为背景”边界阅读