gpt4 book ai didi

html - 背景图像未正确对齐

转载 作者:行者123 更新时间:2023-11-28 02:52:17 25 4
gpt4 key购买 nike

所以我想做的是首先给容器一个背景图像,然后使用 bootstrap 的 col-md-6 创建两个 div 标签。主要 div 的背景图像只是草纹理。在两个 div 标签中,我给出了足球场骨架的背景图像。所以我将一半给它一个 div,然后将相同的图像转换 180。但它并没有像预期的那样出现。不知道这里出了什么问题。

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title></title>
<style type="text/css">

.height{
width: 100%;
min-height: 100vh;
background-image: url(./turf2.jpg);
}
.left{
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
}
.right{
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
transform: rotate(180deg);
}


</style>


</head>
<body>

<div class="row height">

<div class="col-md-6 left">

</div>
<div class="col-md-6 right">

</div>
</div>
</body>
</html>

enter image description here

最佳答案

你可以这样写

 .right {
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

关于html - 背景图像未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38910249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com