当改变背景宽度时，它也改变了容器的位置
我所做的是，我有两个背景图像和每个图像与各自的红框。 红色框是位置绝对的内部引导容器。 第一个红盒子在右边，第二个红盒子在左边。
直到没有问题为止。
现在我必须改变背景图像的宽度，因为我必须在第一张图像上给左空间，在第二张图像上给右空间。
但如果你注意到，如果我给出了空间，它就改变了容器的位置。 我不想改变容器的位置。
当没有空间时
请检查下图。 当有空间的时候
null
.bodywrapper {
margin-top: 40px;
}
.container {
position: relative;
height: 100%;
}
.bannerBg {
height: 350px;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 30px;
width: 92%;
}
.wrapperOne {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg');
}
.wrapperTwo {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg');
}
.box {
background-color: red;
height: 220px;
width: 320px;
position: absolute;
bottom: 0
}
.rightside {
right: 0;
}
.leftside {
left: 0;
}<div class="bodywrapper">
<div class="wrapperOne bannerBg ml-auto">
<div class="container">
<div class="box rightside"></div>
</div>
</div>
<div class="wrapperTwo bannerBg mr-auto">
<div class="container">
<div class="box leftside"></div>
</div>
</div>
</div>null
V>；
我需要知道那是不是可能的。
共有1个答案
你的代码不会产生像你拍摄的2张图像那样的结果，所以我稍微调整了一下。
null
.bodywrapper {
margin-top: 40px;
text-align: right;
}
.container {
position: relative;
height: 100%;
width: 70%;
display: inline-block;
}
.bannerBg {
height: 350px;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 30px;
width: 100%;
}
.wrapperOne {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg');
text-align: center;
background-size: 70% 100%;
background-position: right;
display: inline-block;
}
.wrapperTwo {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg');
text-align: center;
background-size: 70% 100%;
background-position: left;
display: inline-block;
}
.box {
background-color: red;
height: 220px;
width: 320px;
position: absolute;
bottom: 0
}
.rightside {
right: 0;
}
.leftside {
left: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div class="bodywrapper">
<div class="wrapperOne bannerBg ml-auto">
<div class="container">
<div class="box rightside"></div>
</div>
</div>
<div class="wrapperTwo bannerBg mr-auto">
<div class="container">
<div class="box leftside"></div>
</div>
</div>
</div>
</body>
</html>-
我刚刚完成了一个简单的应用程序，但当我把手机换成另一种语言，比如希伯来语，UI位置就发生了变化。我该怎么修好它？
-
我需要帮助的java swing为GUI。我已经包含了“frame.getContentPane（）.setbackground（color.cyan）；”到代码，但框架的背景颜色不变？谢谢你。
-
我想复制这家伙做的但不使用画布。我想有一个div在我的页面的中心，并简单地增加宽度/高度/边界半径10px每秒。这工作得很好，但是由于某种原因，div越大，它向右下方移动的越多。圆圈不是静止不动的，它的中心位置随着它变大而改变。如何在不改变位置的情况下更改div的宽度/高度？ main.css index.html APP咖啡
-
这是我的java文本，看起来有点出乎意料，但是我想改变按钮的背景颜色，这取决于答案是正确的还是错误的 属于“voortgang-button”的css } 然而；现在的问题是我做错了什么？我是一个刚开始的JavaScript程序员，也是荷兰人，所以请多包涵；).
-
我正在尝试使用jQuery TextFill灵活地缩放字体大小以填充其可变宽度容器。问题是，我认为这只适用于固定宽度的容器。我想在一个有响应网格的站点上使用这个。 下面是我的测试，它确认jQuery TextFill对可变宽度容器不起作用:http://jsfidle.net/9uqcjdpy/1/ 如果您调整窗口的大小，您将看到底部的div大小，但文本没有缩放。如果您更改顶部容器的像素宽度，您将
-
我可以改变一个div的背景图像，当我悬停几个链接，我的意思是，如果我悬停在link1有一个背景，link2有另一个背景，等等。 它能用JavaScript、jQuery或简单的CSS技巧完成吗？ 谁能告诉我我做错了什么吗？？？？
-
我试图在javafx中更改整个场景的亮度。这是我的代码目前的样子： 问题是，像这样只改变矩形的亮度，而不改变整个场景的亮度，我还需要改变“背景”的亮度，那有什么办法吗？
-
现在有一张设备图，用来当作背景图片，但是上面很多关键信息，需要通过样式定位在对应位置，但是当改变浏览器大小后，标注的点位就会发生错乱，如何实现该功能？ 要求： 希望图片上的标注在任意窗口大小时，标注都在指定位置，如下： 代码如下： https://codesandbox.io/s/practical-merkle-5tjpkw?file=/index....