在前端页面的开发中，图像的表示方法有在img标签上表示图像，将background属性设定为背景图像表示两种方法。 我知道img图像可以设置图像的中心效果，但是背景图像可以设置中心效果吗？ 如何将背景图像居中？ 本文介绍css如何定位在背景图像的中央。 有一定的参考价值。 请有需要的朋友参考。 我希望能帮到你。
首先，让我们看一下css是如何将背景图像显示在浏览器的中央的。
其实很简单。 css的背景定位属性实现背景图像的水平和垂直居中。 下面的简单代码示例说明如何将background-position属性设置为显示在背景图像的中心。
首先，使用background属性显示背景图像。
背景图片中央*{margin: 0； 垫：0； }
. demo{
width: 400px；
height: 300px；
边距： 50px自动；
border: 1px dashed #000；
ackground-image3360URL(1.jpg )；
background-size:200px 160px；
background-repeat :否- repeat；
}
效果图：
接下来，我们来看看如何设置background-position属性。
1、background-position使用像素设置背景图像的中心(可以知道背景图像的大小) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) )。
在本例中，背景图像的右下角和demo框的中心重叠，但要使背景图像居中，必须将背景图像向下移动一半，向右移动一半，使背景图像的中心和demo框的中心重叠。 因此，通过在css中添加以下代码，在背景图像中央的背景图像：100 px 70px； /*宽的一半、高的一半*
效果图：
2、背景定位使用50%设置背景图像的中心，背景定位为：50 % 50 %；
3、background-position使用center设置背景图像的中央，非常方便。 (第二个中心是可选的)后台：中心；
上述背景定位的三种设置方法都可以实现背景图像居中，背景定位属性的第一个值设置水平位置，第二个值设置垂直位置； 大家可以根据情况决定使用哪种方法。 希望对大家的学习有帮助。 更多相关教程请参阅CSS3视频教程、Html5视频教程和bootstrap视频教程。
【相关文章推荐】