Изменение изображения с помощью CSS - PullRequest
Новая
       49

Изменение изображения с помощью CSS

0 голосов
/ 26 апреля 2019

Я хочу заменить основной фон «герой», который у меня есть на одной из моих страниц. Поскольку я использую Wordpress, я вынужден использовать собственный CSS (я не могу редактировать HTML).

Я попытался настроить таргетинг на div, где содержится текущая фотография, с помощью селекторов классов, как показано ниже: 

.header .custom-mobile-image {

    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);


}

Вот код HTML, на который я пытаюсь нацелиться: 

<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">

Ссылка на саму страницу: http://thenovelcolumn.com/the-10x-rule

Целевая фотография - первая на странице с тремя открытыми книгами в центре.

Я ожидал, что мой CSS-код изменит эту фотографию на ту, на которую указывает ссылка, но фотография останется неизменной.

Ответы [ 4 ]

3 голосов
/ 26 апреля 2019

Ваш селектор должен быть .header.custom-mobile-image (т. Е. Между двумя классами нет пробела - они оба назначены одному и тому же элементу, пробел будет означать отношение родитель / потомок)

И вы должны добавить !important в это правило, чтобы переопределить более конкретный атрибут style.

2 голосов
/ 26 апреля 2019

Это потому, что стили из атрибута "style" обладают большей специфичностью, чем любые стили, которые вы можете добавить с помощью классов и даже идентификаторов: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Так что в этом случае единственный способ - использовать! Важный: 

.header.custom-mobile-image {
    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
  }
1 голос
/ 26 апреля 2019

здесь мы идем: 

.header.custom-mobile-image {

background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X- 
Rule-Image-2-e1555476700855.jpg") !important;


}
0 голосов
/ 26 апреля 2019

Написание встроенного CSS (style = "some: css;") - не лучшая идея. Он всегда будет пренебрегать стилями из вашего файла .css. Как уже упоминалось, речь идет о специфике. Слабыми являются селекторы типов (теги html и псевдоэлементы), затем идут классы, затем идентификаторы

если у вас есть встроенный css, он будет применять стили к файлу .css. Используется только то, что сильнее встроенного CSS!

...