ナビゲーションボタンの後ろに円を追加したい。しかし、私はそれを達成することができません。私はスワイパーを使用しています。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
私は質問を修正しました。私は今まで解決策を得ていませんでした。助けてください –