Css background image attr data

Использование атрибута данных HTML для установки URL-адреса фонового изображения CSS

Я планирую создать собственную фотогалерею для друга, и я точно знаю, как буду создавать HTML, однако у меня возникла небольшая проблема с CSS.
(Я бы предпочел не использовать стили страницы если возможно, полагайтесь на jQuery) У меня вопрос:
Data-Attribute в HTML
Background-image в CSS Я использую этот формат для своих миниатюр html:

и я предполагаю, что CSS должен выглядеть примерно так:

Моя цель — взять data-image-src из div.thumb в моем HTML-файле и использовать его для каждого div.thumb (s) background-image источника в моем CSS-файле. Вот перо Codepen, чтобы получить динамический пример того, что я ищу:
http://codepen.io/thestevekelzer/pen/rEDJv

Ответы (9)

background-image: attr(data-image-src url); 

но, насколько мне известно, это еще нигде не реализовано. В приведенном выше примере url — это необязательный параметр типа или единицы для attr() . См. https://drafts.csswg.org/css-values/#attr-notation .

Когда вы говорите в конце концов, есть ли способ узнать, КОГДА это будет примерно с сайта W3? — person StephenKelzer; 30.09.2014

Случайное предположение без каких-либо сведений о конкретном статусе реализации происходит за 1-2 года до того, как оно станет доступным во всех версиях браузера. — person ; 30.09.2014

caniuse.com/#feat=css3-attr На сегодняшний день ни один браузер не реализовал эту функцию пока что. — person saawsann; 12.03.2018

@BartBurg говорит только о content собственности. Согласно caniuse.com/#feat=css3-attr attr() ни в одном свойстве CSS не пока поддерживается. — person Unicornist; 22.12.2018

2021 год . все еще нет поддержки браузеров, похоже, этого не произойдет 🙁 — person Anentropic; 01.01.2021

Если вы хотите сохранить его с помощью только HTML и CSS, вы можете использовать переменные CSS. Помните, что переменные css не поддерживаются в IE.

Это, наверное, лучший ответ на данный момент. Нет javascript — это всегда хорошо. — person Abdalla Arbab; 12.10.2019

+1. Это более гибкое решение, чем просто добавление изображения непосредственно в строку, как в другом ответе ниже, потому что вы можете объявить несколько путей к изображениям, скажем, для нескольких разрешений, а затем решить в своем коде CSS, какое изображение загружать для какого разрешения. — person Sumit; 06.11.2020

в этот момент почему бы просто не установить background-image в атрибуте стиля, зачем вообще возиться с переменной ?? — person Muhammad Umer; 11.02.2021

@MuhammadUmer Я тоже часто использую фоновое изображение, просто пытаясь как можно лучше соответствовать задающему вопросу. Я могу придумать два преимущества использования переменной: 1) Вы можете легко перезаписать ее с помощью CSS, не требуя! Important. 2) Вы можете установить изображения по умолчанию, если переменная не установлена ​​в: root <>. Я обновил свой CodePen, чтобы проиллюстрировать эти изменения. — person Bruce Brotherton; 12.02.2021

var list = document.getElementsByClassName('thumb'); for (var i = 0; i

Оберните это тегами

Как насчет использования Sass? Вот что я сделал, чтобы добиться чего-то подобного (хотя обратите внимание, что вам нужно создать список Sass для каждого из атрибутов данных).

/* Iterate over list and use "data-social" to put in the appropriate background-image. */ $social: "fb", "twitter", "youtube"; @each $i in $social < [data-social="#"] < background: url('#/icons/#.svg') no-repeat 0 0; background-size: cover; // Only seems to work if placed below background property > > 

По сути, вы перечисляете все значения своих атрибутов данных. Затем используйте Sass @each для перебора и выбора всех атрибутов данных в HTML. Затем введите переменную итератора и сопоставьте ее с именем файла. В любом случае, как я уже сказал, вы должны перечислить все значения, а затем убедиться, что ваши имена файлов включают значения из вашего списка.

Это требует, чтобы у вас был известный список значений в вашем объявлении стилей. Когда я задал этот вопрос, я пытался сделать так, чтобы разметка определяла отображаемые стили, а не наоборот. — person StephenKelzer; 11.10.2017

Это помогло мне решить аналогичную проблему, а также показало мне функцию Sass, о существовании которой я не подозревал, ура! — person MadSkunk; 14.06.2019

Источник

attr ( )

Хотите сделать атрибут элемента видимым на странице? Используйте эту функцию!

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

attr ( ) — это CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element" title="На самом деле внутри нет никакого текста">div>    Скопировать Скопировано Не удалось скопировать   

 div::before  content: "Элемент с классом " attr(class);> div::after  content: "Подсказка: " attr(title);> div::before  content: "Элемент с классом " attr(class); > div::after  content: "Подсказка: " attr(title); >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 div::before  content: attr(data-title); content: attr(href);> div::before  content: attr(data-title); content: attr(href); >    Скопировать Скопировано Не удалось скопировать   

 div::before  content: attr(src url); content: attr(data-count number); content: attr(data-width px);> div::before  content: attr(src url); content: attr(data-count number); content: attr(data-width px); >    Скопировать Скопировано Не удалось скопировать   

С указанием фолбэка, то есть запасного значения:

 div::before  content: attr(data-count number, 0); content: attr(src url, ""); content: attr(data-width px, inherit); content: attr(data-something, "default");> div::before  content: attr(data-count number, 0); content: attr(src url, ""); content: attr(data-width px, inherit); content: attr(data-something, "default"); >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Функцию attr ( ) можно использовать в качестве значения любого CSS-свойства, однако полностью поддерживается только свойство content . Для остальных свойств поддержка экспериментальная и может различаться от браузера к браузеру. Актуальную информацию о поддержке можно посмотреть на Can I use.

💡 Написание с указанием типа или фолбэка пока имеет статус экспериментальной технологии и не поддерживается браузерами. Но в будущем это позволит гораздо сильнее расширить область применения функции attr ( ) . Например, мы сможем написать так:

 .colored  background-image: attr(data-src url);> .colored  background-image: attr(data-src url); >    Скопировать Скопировано Не удалось скопировать   

Тут мы указали, что в качестве значения для свойства background — image мы хотим использовать значение атрибута data — src . При этом уточнили, что значение атрибута data — src — это не просто строка, а корректный URL.

Примеры записи с указанием типа или фолбэка кажутся довольно перспективными, но, к сожалению, пока не поддерживаются ни одним из браузеров.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Самый распространённый случай использования функции attr ( ) — отображение значения атрибута href после текста ссылки при печати страницы.

   Подробнее о скидках и акциях можно узнать по ссылке  p> Подробнее о скидках и акциях можно узнать a href="http://best-site.ru/sales">по ссылкеa> p>    Скопировать Скопировано Не удалось скопировать   

 @media print  a::after  content: " [" attr(href) "]"; >> @media print  a::after  content: " [" attr(href) "]"; > >    Скопировать Скопировано Не удалось скопировать   

Источник

Css – Using HTML data-attribute to set CSS background-image url

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.
(I would prefer to not have the page styling rely on jQuery if possible)

My question regards:
Data-Attribute in HTML
Background-image in CSS

and I assume the CSS should look something like this:

My goal is to take the data-image-src from the div.thumb in my HTML file and use it for each div.thumb (s) background-image source in my CSS file.

Here is a Codepen Pen in order to get a dynamic example of what I am looking for:
http://codepen.io/thestevekelzer/pen/rEDJv

Best Solution

You will eventually be able to use

background-image: attr(data-image-src url); 

but that is not implemented anywhere yet to my knowledge. In the above, url is an optional «type-or-unit» parameter to attr() . See https://drafts.csswg.org/css-values/#attr-notation.

Related Solutions

Html – Adding HTML entities using CSS content

You have to use the escaped unicode :

Html – Set cellpadding and cellspacing in CSS

For controlling «cellpadding» in CSS, you can simply use padding on table cells. E.g. for 10px of «cellpadding»:

For «cellspacing», you can apply the border-spacing CSS property to your table. E.g. for 10px of «cellspacing»:

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school «cellspacing».

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. I say «almost» because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing=»0″ ) then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse .

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Источник

CSS set background-image by data-image attr

a nice alternative to data- attributes (or the attr() approach in general) can be the use of custom properties (MDN, csswg, css-tricks).

as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!

also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.

Solution 2

As of writing, the browser support of attr() notation on CSS properties other than content — like background-image — is very limited.

Besides, as per CSS level 2 spec, combining url() and attr() is not valid:
content: url(attr(data-image)); .

Hence there is no cross-browser CSS solution at the moment to achieve the desired result. Unless using JavaScript is an option:

var list = document.querySelectorAll("div[data-image]"); for (var i = 0; i

Solution 3

In your HTML:

In your CSS:

Problems:

This is your required answer. Check this documentation in w3.org. But the main problem is it won’t work, not yet!. In many browsers, attr() runs successfully when it is used in content: attribute of the CSS coding. But using it in other attributes of CSS, it doesn’t work as expected, not even in major browsers.

Solution 4

If the goal is being able to set the background-image style of an HTML element from within the HTML document rather than the CSS definition, why not use the inline style attribute of the HTML element?

If selecting the by style is not an option, you may be able to give it a class and select it by class name.

Hossain Khademian

I’m a professional Android App Developer. I enjoy exploring new things, techs and frameworks. I have 5 years experience in Native Android App Development plus 2 years in Kotlin language and 3 years in NodeJS for server-side scripting. I actively tries to learn new things and importantly enhance the previous ones I love robotics, space, aliens, computers, romance, music, and . internationalization!

Comments

border show correctly but nothing happened for background How can do I fix this code only with css (not js or jq)?

Note that url( attr(data-image) ) is definitely wrong. According to CSS Values and Units Module Level 3, url() notation only accepts bare/quoted as URI. The OP has already used the valid syntax of attr() , but it is not implemented in browsers yet.

@HashemQolami, thank you. But I didn’t understand the documentation of url. What exactly will come in place of url( attr() ) ??

As I mentioned, the OP used the valid syntax: attr(data-image url) which is stated by the spec. The new syntax of attr() is: attr( ? [ , ]? ) where optional specifies the type of the given and the would be the default value if named attribute is missing.

@HashemQolami, thank you for your valuable help. I never learnt anything from documentations, everything I learn is from a person’s teachings. But, I still include the links to documentation for clearing problems to questioners.

Источник