背景图片、完全填充、相关css/ div里的img图片水平垂直居中

本文详细介绍了CSS中背景属性的使用方法,包括背景颜色、图片、重复方式、位置及大小等,以及如何让图片在div中水平垂直居中的三种方法。适合初学者和进阶者学习。

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

 

background:

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

1、背景图片知识点:

background-image:使用的背景图像
background-color:背景颜色
background-repeat:如何重复背景图像,no-repeat 背景图像将仅显示一次,repeat 默认将在垂直方向和水平方向重复,repeat-x,repeat-y.

background-color:
background-image:  url(path) 
background-repeat: repeat/no-repeat/repeat-x/repeat-y

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

background-attachment: fixed/scroll;

2、位置和大小

background-position 属性设置背景图像的起始位置

background-position: 
background-size: length|percentage|cover|contain;
background-size:100% 100%

length:第一个值设置宽度,第二个值设置高度。cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

想让背景图片完全填充div,就是背景图片进行拉伸完全填充div的四个边框,可以设置百分比100%。

 


div里的img图片水平垂直居中

方法1:通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px; /* 高度的一半 */
        margin-left: -25px; /* 宽度的一半 */
    }
</style>

方法2:还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);
 

transform: translate(-50%,-50%);

方法3:弹性布局flex

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值