Pomoc w programowaniu, odpowiedzi na pytania / Html / CSS Circle image z przepełnieniem nakładki CSS - html, css, css3

Obraz CSS Circle z przepełnieniem nakładki CSS - html, css, css3

Mam obraz o wysokości i szerokości 500 px. Użyłem promienia granicznego, aby zrobić z niego okrąg. Mam także jednolity kolor tła, na którym używam promienia granicznego, aby uczynić go kółkiem.

Próbuję utworzyć nakładkę na kursor przezzmniejszając nieprzezroczystość obrazu, pozwalając przejrzeć obraz tła. Mam to w zasadzie działa, chociaż istnieje około 1px nakładanie się pokazując obraz tła na dole rzeczywistego obrazu.

Skrawek:

 .image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

<div class="image-wrapper">
<img class="testing red" src="/images/img.jpg">
</div>

Jak widać z przykładu, około jednego piksela tła jest wyświetlane na dole obrazu przed każdym zawisaniem.

Odpowiedzi:

1 dla odpowiedzi № 1

Myślę, że chodzi o to img ma display: inline domyślnie. Możesz to naprawić, ustawiając swój img do Blok wyświetlacza w swoim CSS

.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}

<div class="image-wrapper">
<img class="testing red" src="/images/http://lorempixel.com/400/400">
</div>

0 dla odpowiedzi nr 2

Spróbuj dodać ten css:

.image-wrapper{
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}

Oto przykładowy przykład pytania, mam nadzieję, że to pomoże.

http://jsfiddle.net/z3rLa/1/

0 dla odpowiedzi № 3

.image-overlay {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
border:2px solid #000;
}
.image-overlay:hover {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
opacity:0.5;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}

<div class="image-overlay">
<img src="/images/https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSODZIzJ1LLVMxlyd4RKB8TmvAeufTRGolSlX64IagMNtWvo4ij">
</div>