• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nałożenie koloru na obrazek

VPS Starter Arubacloud
0 głosów
167 wizyt
pytanie zadane 19 kwietnia 2022 w HTML i CSS przez Sic Dyskutant (8,510 p.)

Witam,

Dodałem do strony obraz. W zadaniu mam dodać (nałożyć) na niego kolor w prawym górnym rogu w raz tekstem. Jednak po nałożeniu nie pojawia się kolor. Ustawiałem go bez psedo-elementu :before, jednak pojawiał się jako tło obrazku. Obrazek jest ustawiony za pomocą bootstrap.

Oto kod:

HTML

<div>
              <img
                src="images/coffee-1.png"
                class="rounded float-right pl-5"
                alt="coffee_1"
              />
            </div>

CSS

.products img {
  position: relative;
}

.products img::before {
  position: absolute;
  content: '';
  background-color: $background-color-beige;
  width: 100%;
  height: 100%;
  top: 15px;
  left: 15px;
}

 

komentarz 20 kwietnia 2022 przez VBService Ekspert (251,170 p.)
edycja 20 kwietnia 2022 przez VBService

1 odpowiedź

0 głosów
odpowiedź 19 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Element <img/> należy do grupy elementów zastępowalnych - ich zawartość nie znajduje się w DOM, więc nie można tego ostylować; można ostylować sam element jakim jest obrazek, ale nie to, co znajduje się wewnątrz. Pseudo elementy ::before/::after tworzą się wewnątrz elementu, którego dotyczą, a że <img /> takiego wnętrza nie ma, to nie można na nim użyć ::before/::after.

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

Obejściem problemu może być owinięcie obrazka w inny element i stworzenie pseudo elementu na tymże rodzicu - Ty już posiadasz <div>, więc możesz ::before dodać na niego.

komentarz 19 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
Tworząc klasę do tego diva i dodając selektor do css, nie widać właściwość. Tak jakby nic nie zostało do tego elementu.
komentarz 19 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)
Pokaż kod po zmianach. A najlepiej jakbyś to udostępnił na CodePen - razem z działającym Bootstrapem.
komentarz 20 kwietnia 2022 przez Sic Dyskutant (8,510 p.)

https://codepen.io/sicarchitect/pen/NWXoLRQ

Nie korzystałem nigdy z codePen, wiem tylko jak tam dodać kod, jednak nie wiem jak ustawić Bootstrap.

komentarz 20 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Użycie float na obrazku powoduje, że jest on wyjmowany z flow dokumentu, przez co div o klasie product-image ma zerowe wymiary, więc jego pseudo element jest niewidoczny (jego wymiary są z kolei ustawione względnie do rodzica). Usuń float z obrazka, albo nadaj temu divowi sztywne wymiary.

komentarz 21 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
Wolałbym nałożyć wymiary, tak aby po prostu nałożyć na obrazek bez zmiany pozycji. W jaki sposób mogę to zrobić, wybacz za głupie pytanie ale nigdy tego nie robiłem.
1
komentarz 21 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

To dodaj szerokość i wysokość do klasy product-image:

.product-image {
    position: relative; /* to już było */
    width: 100px;
    height: 100px;
}

Podobne pytania

0 głosów
1 odpowiedź 274 wizyt
pytanie zadane 11 grudnia 2015 w HTML i CSS przez tirex Gaduła (4,430 p.)
0 głosów
1 odpowiedź 3,705 wizyt
pytanie zadane 2 września 2015 w HTML i CSS przez tirex Gaduła (4,430 p.)
0 głosów
1 odpowiedź 803 wizyt
pytanie zadane 20 września 2015 w C i C++ przez jedrus_91 Użytkownik (760 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...