Nałożenie koloru na obrazek

Question

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;
}

 

Comments

Sprawdź to: https://jsfiddle.net/g69e0aLq/

Answer 1

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.

Comments

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.

---

Pokaż kod po zmianach. A najlepiej jakbyś to udostępnił na CodePen - razem z działającym Bootstrapem.

---

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

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

---

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.

---

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.

---

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

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