css background

最新推荐文章于 2024-02-04 02:17:06 发布

原创最新推荐文章于 2024-02-04 02:17:06 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了CSS中背景图片的尺寸设定、位置调整方法，并介绍了如何使用linear-gradient()函数来创建线性渐变效果。通过具体实例说明了如何精确控制背景图片的位置及比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background:

background-size: 100px 100px; // 背景图片宽100px;高100px;

background-size:100% 80%; // 背景图片width等于盒子宽,height是盒子高度的80%;

.box {
				width: 410px;
				height: 210px;
				border: 10px red solid;
				background-image: url(img/sss.jpg);
				background-size: 100px 100px;
				background-repeat: no-repeat;
				background-position: left 217px bottom 90%;
                     /*background-position:100px 0;*/
				/*background-position-y: 75%;*/
			}

background-position:100px 0; //背景图片距离左侧 100px 距离上面 0px ,默认是相对于左上角的；

background-position:left center; // 距离左侧 0px,上下居中相当于 left 50%;

以上面box 为例 ,假设图片大小是100px ，盒子宽410px 高 210px 现在想让图片距离上方 50px 距离左侧 100px 那么显然可以写成： background-position:100px 50px;

那么换成百分比应该写成多少呢？

x应该是距离左侧的距离 / (盒子宽 - 背景图片的宽 ) 100/(410 - 100) = 32.2%

y应该是距离上方的距离 / (盒子高 - 背景图片的高 ) 50/(210 - 100) = 45%

background-position:32.2% 45%;

还可以更改方向 background-position: right 32.2% top 45%;

linear-gradient() 函数用于创建一个线性渐变的 "图像"。可以更改background-size 普通的背景颜色就不能改了，，不是图像

参考链接 :https://blog.youkuaiyun.com/qq_39207948/article/details/80172332