Czy można ukryć określony obszar CSS background image za pomocą clip? na przykład mam wiele ikon na obrazie, ale chcę pokazać tylko jedną ikonę. Ponieważ obszar Div jest większy niż rozmiar ikony, wyświetlane są również inne niepotrzebne ikony. Czy mogę je ukryć bez robienia kolejnego obrazu dla tej pojedynczej ikony?

Jsfiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

enter image description here

5
Jitendra Vyas 23 sierpień 2011, 11:51

2 odpowiedzi

Najlepsza odpowiedź

Zasadniczo tworzysz kontener dla każdego obrazu, którego używasz do dyktowania obszaru obrazu.

http://jsfiddle.net/FyMW6/4/

HTML:

<div class="button">
    <div class="text">Lorem ipsum dolor sit amet</div>  
    <div id="house" class="icons"></div>
</div>

CSS:

.button {     
    width: 300px;
    float: left;
    border:1px solid red
}

.text {
    float: left;
    width: 245px;
}

.icons {
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg");
    background-repeat: no-repeat;

    width: 50px;
    height: 50px;
    float: right;
}

#house {
    background-position: -56px -45px;
}

#gear {
    background-position: -56px -106px;
}
4
Joonas 23 sierpień 2011, 14:36
Jak powiedział @Pekka, nie jest to możliwe w przypadku CSS clip i Background-Clip, ale Twoje rozwiązanie będzie dla mnie działać.
 – 
Jitendra Vyas
23 sierpień 2011, 14:46

Najprościej jest ustawić klasę do wyświetlania: none;

-1
Reza 22 czerwiec 2014, 22:05