Jak odwrócić obraz tła za pomocą CSS?

224

Jak przerzucić dowolny obraz tła za pomocą CSS? Czy to możliwe?

obecnie używam tego obrazu strzałki w jednym background-imagez licss

wprowadź opis zdjęcia tutaj

On: visitedMuszę obrócić tę strzałkę w poziomie. Mogę to zrobić, aby zrobić kolejny obraz strzałki, ALE jestem ciekawy, czy można odwrócić obraz w CSS:visited

Jitendra Vyas
źródło
3
dobre pytanie! może się to przydać w wielu różnych przypadkach.
AshBrad
@AshBrad - Dziękujemy za komentarze. tak, może być przydatny w wielu warunkach
Jitendra Vyas

Odpowiedzi:

234

Możesz odwrócić go w poziomie za pomocą CSS ...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle .

Jeśli zamiast tego chcesz obrócić w pionie ...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Źródło .

alex
źródło
1
Jeśli zastanawiam się tylko nad przeglądarkami internetowymi, -webkit-transform: scaleX(-1);to wystarczy?
Jitendra Vyas
@Jitendra Powinno być plus własność z prefiksem nie sprzedawca.
alex
25
@alex - jeden problem w tym. przerzuca także tekst, który jest wewnątrz <a>i chcę tylko odwrócić obraz tła. Dajesz kod, aby przerzucić cały element
Jitendra Vyas
3
@Jitendra Wygląda na to, że nie możesz po prostu odwrócić obrazu tła. Możesz jednak umieścić ikonę w a, spana następnie odwrócić ją.
alex
1
@alex - OK, jeśli mogę użyć tego kodu <li><a href="#"><span>text</span></a></li>to przerzucanie tekst zbyt więc co będzie przeciwieństwem kodzie dać unflip tekst, więc można napisać kod dla unflip li a span { }w css
Jitendra Vyas
86

Znalazłem sposób, aby przerzucić tylko tło, a nie cały element, po tym, jak zobaczyłem wskazówkę, aby przerzucić w odpowiedzi Alexa. Dzięki alex za twoją odpowiedź

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

Zobacz przykład tutaj http://jsfiddle.net/qngrf/807/

Jitendra Vyas
źródło
7
@Jitendra Czy możesz sprawdzić adres URL Jsfiddle. Myślę, że nie ma tego samego kodu, który opublikowałeś w odpowiedzi + nie działa ..
sachinjain024
3
Czy kod jsfiddle, na który piszesz, wysyła tekst? czy to jest to, czego chcesz, czy tylko obraz tła?
mandza
1
twój jsfiddle nie jest tym samym kodem, czy możesz go zaktualizować?
Royi Namir,
1
@JitendraVyas cześć od 2016 roku! Zastanawiałem się nad zasugerowaniem edycji, aby naprawić adres URL jsfiddle, ponieważ nadal łączy się on z innym kodem niż w Twojej odpowiedzi tutaj - chcesz edytować post lub usunąć link? Dzięki :)
totallyNotLizards
-webkit-transform:scaleX(-1);dla chromu
Wesley Smith
19

Według w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

Właściwość transformacji jest obsługiwana w programach Internet Explorer 10, Firefox i Opera. Internet Explorer 9 obsługuje alternatywną właściwość -ms-transform (tylko transformacje 2D). Safari i Chrome obsługują alternatywną właściwość -webkit-transform (transformacje 3D i 2D). Opera obsługuje tylko transformacje 2D.

To jest transformacja 2D, więc powinna działać z prefiksami dostawcy w Chrome, Firefox, Opera, Safari i IE9 +.

Inne zastosowane odpowiedzi: przedtem, aby zatrzymać przerzucanie zawartości wewnętrznej. Użyłem tego w stopce (do lustrzanego odbicia obrazu z mojego nagłówka):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

W rezultacie przerzucasz element, a następnie ponownie wszystkie jego elementy potomne. Działa również z elementami zagnieżdżonymi.

jdforsythe
źródło
1
Dziękuję za odpowiedź! Ten działał dla mnie najlepiej, ponieważ inni albo odwrócili wszystkie dzieci, albo wymagali bardziej złożonej sztuczki, aby odwrócić odwrócenie.
Austin Salgat
Jeśli ta odpowiedź odwróci wszystko w docelowym elemencie, po prostu wciśnij go w inny element. Innymi słowy, zawiń zawartość, której nie chcesz odwracać, w nowy element <div>.
Onosa,
5

Można odwrócić zarówno w pionie i poziomie w tym samym czasie

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

Dzięki właściwości przejścia możesz uzyskać fajny efekt

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

W rzeczywistości odwraca cały element, nie tylkobackground-image

SKRAWEK

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}
#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}
<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

Fi Ras
źródło
„Przerzucanie w pionie i poziomie jednocześnie” ma taki sam efekt jak obrócenie obrazu o 180 stopni, działa dobrze i jest tym, czego szukałem
Stonecrusher