Saya perlu membuat sesuatu seperti ini. dan saya ingin melakukannya untuk <div></div>
yang memiliki lebar
di %
Saya dapat melakukan ini dengan menggunakan gambar dan menambahkan div
lain di dalamnya dan z-index
.
Tapi saya ingin tahu apakah mungkin untuk membuat lingkaran ini di backgroud menggunakan css.
Ini bisa dilakukan dengan menggunakan properti border-radius
. pada dasarnya, Anda perlu mengatur border-radius tepat setengah dari tinggi dan lebar untuk mendapatkan lingkaran.
HTML
<div id="container">
<div id="inner">
</div>
</div>
CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}
Anda dapat menggunakan kelas semu :before
dan :after
untuk meletakkan latar belakang berlapis-lapis pada sebuah elemen.
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}