Hoe maak je een cirkelvormige achtergrond met css?

Ik moet zoiets maken. en ik wil het doen voor een <div></div>met een widthin %

Ik kan dit doen door een afbeelding te gebruiken en een andere divbinnenin en z-indextoe te voegen.

Maar ik wil weten of het mogelijk is om deze cirkel in achtergrondgeluid te maken met css.

Antwoord 1, autoriteit 100%

Houd het simpel:

.circle
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }

Breedte en hoogte kunnen van alles zijn, zolang ze maar gelijk zijn

Antwoord 2, autoriteit 45%

Controleer met de volgende css. Demo

.circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Voor meer vormen kunt u de volgende url’s volgen:

http://davidwalsh.name/css-triangles

Antwoord 3, autoriteit 19%

Het kan worden gedaan met behulp van de eigenschap border-radius. eigenlijk moet je de grensradius op precies de helft van de hoogte en breedte instellen om een cirkel te krijgen.

JSFiddle

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%;
}

Antwoord 4, autoriteit 13%

Verlopen?

div {
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center,  #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}

https://fiddle.jshell.net/su5oyd4L/

Antwoord 5, autoriteit 6%

Je kunt de pseudo-klassen :beforeen :aftergebruiken om een achtergrond met meerdere lagen op een element te plaatsen.

#divID : before {
    background: url(someImage);
}
#div : after {
    background : url(someotherImage) -10% no-repeat;
}

Antwoord 6, autoriteit 5%

Hieris een oplossing om dit met een enkele divelement met CSS-eigenschappen, border-radiusdoet de magie.

CSS:

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000
}

HTML:

<div class="circle">Hello</div>

Antwoord 7

Als u het met slechts 1 element wilt doen, kunt u de :: vóór en :: na pseudo-elementen voor dezelfde div in plaats van een wrapper gebruiken.
Zie http://css-tricks.com/pseudo-element-roundup/

Antwoord 8

Misschien moet u ook een display-inline-blok gebruiken:

.circle {
    display: inline-block;
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    z-index: -1;
}