Wątek przeniesiony 2016-09-03 13:13 z Webmastering przez dzek69.

Kółko wokół obrazka - nie działa tak jak chcę

0

45967cef59.png

Chcę zrobić coś w tym stylu. Czyli pojawiające się kółko przy zamykaniu zakładek na krzyżyku.

Oto mój kod:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="arkusz.css">
</head>
<body>
    <div id="myImage"></div>
</body>
</html>

arkusz.css

body{
	background-color: yellow;
}

div#myImage{
	background-image: url("cross.png");
	width: 16px;
	height: 16px;
}

div#myImage:hover{
	background-image: url("cross.png");
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	border-radius: 20px;
	background-color: red;
}

Niestety nie wiem czemu, ale pojawiające się kółko ucina cześć obrazka, a zwiększanie border-radius nic nie daje. Chciałbym aby średnica kółka była znacznie większa od krawędzi krzyżyka i żeby mógł łatwo ją regulować.

2

border radius przycina to, co już jest. nie "rozpycha" się ponad zdefiniowny rozmiar (tu 16x16)

http://jsbin.com/tekifonona/edit?html,css,output

0

No właśnie. Też to zauważyłem. A jak zrobić, żeby rozpychał się ponad zdefiniowany rozmiar? Trochę dziwne, że nie można postawić granicy ponad rozmiar obrazka.

2

jeśli to ma być to kółko, to lepiej dać 50% a nie w pikselach (border-radius: 50%), tym sposobem niezależnie od rozmiaru kółka będzie zawsze kółkiem.

0

Faktycznie, dzięki. Ale bardziej chciałbym się dowiedzieć jak zrobić żeby mieć granice kółka poza rozmiarem obrazka.

0

Ja bym dodał po prostu większy padding do diva.

0

Na to żeby dodać padding to wpadłem, ale efekt jest do kitu bo wtedy obrazek (krzyzyk) nie jest w środku kółka tylko rozjeżdża się gdzieś na bok.

2

http://jsbin.com/gezijedaza/1/edit?html,css,output Po co sobie życie utrudniać pobieraniem obrazków?

0

@CeKa: Fajnie, że mnie czegoś nauczyłeś. Ale jednak nie podoba mi się twoje rozwiązanie, bo ty sobie krzyżyk stworzyłeś dając '' w content i obracając. Ja jednak chcę to zrobić mając do dyspozycji gotowy obrazek.

1 użytkowników online, w tym zalogowanych: 0, gości: 1