我想在导航按钮后添加一个圆。但我无法实现它。我正在使用Swiper。在CSS之前使用,在后台添加圆圈
这些是我在导航箭头下定位圆时的一些快照。
正如你可以看到,当我调整量,左::前,背景圈定上面的导航按钮。我正在使用伪::在CSS之前创建圈子。但我无法实现它。这是我的CSS工作。请检查它,并让我知道,我在哪里做错了?
.content .swiper-button-next {
height: 25px;
padding-left: 62px;
padding-top: 0px;
margin-top: -13px;
z-index: 4 !important;
position: absolute;
}
.swiper-button-next.swiper-button-white{
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next, .swiper-button-prev {
top: 50%;
width: 27px;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.content .swiper-button-next:before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
border-radius: 50%;
margin-left: -53px;
margin-top: -11px;
opacity: 0.7;
z-index: -2;
position: relative;
background: #080808;
}
<div class="content swiper-container-horizontal swiper-container-free-mode">
<div class="swiper-button-next swiper-button-white"></div>
</div>
预先感谢您。
我也只是 “反转” 了。将元素和背景图像添加到':before'元素中。 – pstenstrm
我修改了这个问题。直到现在我还没有得到解决方案。请帮助 –