css中background使用attr获取
时间: 2024-01-27 22:07:27 浏览: 166
使用CSS content的attr实现鼠标悬浮提示(tooltip)效果
在 CSS 中,可使用 `attr()` 函数来获取 HTML 元素的属性值,然后将其用于指定样式的属性值。对于 `background` 属性,可以使用 `attr()` 函数来获取指定元素的背景图片 URL,示例如下:
```css
div {
background-image: url(attr(data-bg-img));
}
```
在上述代码中,`attr(data-bg-img)` 表示获取 `data-bg-img` 属性的值,并将该值作为背景图片的 URL。在 HTML 中,需要为指定元素添加 `data-bg-img` 属性并设置对应的值,示例如下:
```html
<div data-bg-img="https://example.com/background.jpg"></div>
```
这样,该 `<div>` 元素就会以 `https://example.com/background.jpg` 作为背景图片。需要注意的是,`attr()` 函数只能用于获取元素的属性值,不能用于计算和操作属性值。
阅读全文