当前位置:首页 > 前端技术 > css中设置背景颜色、背景图片

css中设置背景颜色、背景图片

2022年11月09日 08:46:59前端技术19

对于在css中设置背景分为两种形式:

1. 设置纯色为背景。背景background可以设置为纯色的背景颜色。
2. 设置图片为背景。可以设置对象背景为图片,如果背景是图片,可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

设置背景样式:

1. background-color: 设置颜色作为对象背景颜色;
2. background-image: 设置图片作为背景图片;
3. background-repeat: 设置背景平铺重复的方向;
4. background-attachment: 设置或检索背景图像是随对象内容滚动还是固定的。
5. background-position: 设置或检索对象的背景图像位置。
6. background-size: 可以设置背景图片覆盖整个区域,值指定为cover,就可以实现了
7. background背景样式的值也可以是复合属性值组合,例如:

background: #212121 url("…/…/dist/images/auth.min.jpg") no-repeat 5px 20px fixed;
其中,涉及到的#212121:指的是设置的背景的颜色值;
url():指的是设置的背景图片的具体路径;
no-repeat:指的是设置的图片是否平铺,平铺的方式为不重复图片;
5px:指的是距左多少像素(距离);
20px: 距上面多少像素(距离);
fixed:背景图片是固定,该位置同样可以设置为scroll,背景图片随上下滚动条流动。

作者:长大的小蚂蚁
来源链接:https://blog.csdn.net/zjy123078_zjy/article/details/105005799

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68736.html

标签: css
分享给朋友:

“css中设置背景颜色、背景图片” 的相关文章

Web都会的CSS总结(回顾必备)

目录 选择器 background(背景) font(字体样式) 文本格式化 链接样式 border(边框样式) table(表格样式) list-style(列表样式) margin(外边距) padding(...

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

css文字重叠解决

css文字重叠解决

DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? 出现原因是因为对li设置了css高度和宽度,当内容比较多是内容会自动换行,而又有高度,这样就造成内容溢出而与下一排内容重叠覆盖现象。 解决方法如下: 第一种,取消高度...

html中怎样给svg文件改变颜色,通过CSS改变svg image引入的图片颜色?

在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果。很不错的方法。 但是我现在的元素是在svg中,即图片的引入是通过image元素xlink:href来引入图...

博客园:CSS & HTML

博客园:CSS & HTML

  [ 显示头像 & 去掉广告 &  禁止界面上,选中和复制内容!]   ⚠ ADD:增加、禁止复制功能!   作用:在侧栏中,显示头像 & 去掉文章最下边的广告! 做法:自定...

利用CSS实现rem适配

利用CSS实现rem适配

原文地址:https://www.toutiao.com/i6773562707711885832 方案一:使用meta标签 在html的head中插入下面的meta标签: <meta name="viewport" content="wid...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。