CSS中如何设置背景图片不是平铺?
如果想要在网页中使用背景图片,通常的做法就是使用CSS中的background属性,将对应的URL链接填写进去,即可实现背景图片的添加,例如:
body {
background-image: url('image.jpg');
}
但是有时候我们并不想要背景图片平铺整个页面,而是想要显示一张原尺寸的图片或者只在特定位置显示图片。那么如何实现这样的设置呢?
一、在不平铺的情况下显示图片
在 CSS3 中,有一个简单的属性可以实现这一点,就是background-size。我们可以使用该属性,控制背景图片在背景区域中显示的大小。
例如,下面的代码会将背景图片显示在屏幕中央,图片大小为 400×600:
body {
background-image: url('image.jpg');
background-size: 400px 600px;
background-position: center center;
background-repeat: no-repeat;
}
此时,背景图片不会平铺,而是根据设定的大小显示在背景区域的中央位置。
二、在特定位置显示图片
要在特定位置显示背景图像,我们可以使用background-position属性来控制。该属性可以帮助将背景图片定位到特定位置。
例如,如果我们想要在网页的顶部左边显示一张背景图片,可以这样设置:
body {
background-image: url('image.jpg');
background-position: left top;
background-repeat: no-repeat;
}
如上所示,我们将图片定位到了左上角(left top)。如果需要将其定位到页面的其他位置,可以根据具体情况修改background-position的值。
通过以上两个方法,我们可以轻松实现背景图片不平铺、或在特定位置显示的效果。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。