Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
css如何设置背景_创想鸟

css如何设置背景

css设置背景的方法:1、使用【background-color】属性为元素设置一种纯色;2、使用【background-image】属性为元素设置背景图像;3、background属性可在一个声明中设置所有的背景属性。

css如何设置背景

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css设置背景的方法:

1、background-color属性

background-color属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

立即学习“前端免费学习笔记(深入)”;

transparent 值

尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。

2、background-image属性

background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。

初始背景图像(原图像)根据 background-position 属性的值放置。

3、background属性

background是一个简写属性,可在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color:规定要使用的背景颜色。

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

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

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

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

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

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

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

注意:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

示例:

div {width: 400px;height: 200px;border: 1px solid red;}.demo1{background-color: paleturquoise;}.demo2{background-image: url(1.jpg);background-size: 400px;}.demo3{background:paleturquoise url(1.jpg) no-repeat;background-size: 300px;}
纯色背景
图片背景
纯色+图片背景

效果图:

13908c42a05100e9f4406033e263481.png

相关学习推荐:css教程

以上就是css如何设置背景的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1619184.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
css如何设置图片不重复
上一篇 2025年12月24日 06:34:56
css如何设置边框颜色
下一篇 2025年12月24日 06:35:22

相关推荐

发表回复

登录后才能评论
关注微信