CSS学习--背景

2022-03-31 14:31:22 阅读：176 来源： 互联网

标签：box repeat 滚动 rgba -- 背景 background CSS

背景

背景色

设置透明度的颜色值：rgba(xxx,xxx,xxx,opacity)

background-color: { }

背景图像

background-image: { }

是否平铺

background-repeat: no-repeat | repeat-x | repeat-y | repeat;

背景大小

background-size: width height | cover | contain;

值	描述
cover	浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比
contain	浏览器将使图像的大小适合盒子内。如果长宽比不同将使一边留有空隙。

背景定位

background-position: background-position-x | background-position-y;

background-origin: padding-box | border-box | content-box;

背景绘制区域

background-clip: border-box | padding-box | content-box;

渐变背景

background-image:linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),url('https://mdn.mozillademos.org/files/7693/catfront.png');

背景附加

background-attachment: scroll | fixed | local;

值	描述
scroll	使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。
fixed	背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。
local	滚动值相当混乱，只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持.

一句声明

/*
background-color 只能在逗号之后指定。
background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。
*/

background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png");

标签：box,repeat,滚动,rgba,--,背景,background,CSS
来源： https://www.cnblogs.com/-LemonWater-/p/16081668.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9