Question

我的问题可能有点令人困惑，我的css技能充其量只是温和但是我会尽力尝试解释。所以我的问题如下;

是否可以插入/扩展CSS属性值？

我想要实现的目标的一个例子可以在下面的代码段中找到;

* {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
}

.box {
  display: inline-block;
  float:left;
  width: 50%;
  padding-top: 80%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* --- original element... --- */

.original {
  background-image: url(http://imageshack.com/a/img631/8360/WuQwuf.jpg);
}


/* --- What I'm After --- */

.sourced {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(http://imageshack.com/a/img631/8360/WuQwuf.jpg);
}

<div class="wrap">
  <div class="box original"></div>
  <div class="box sourced"></div>
</div>

我想要的应用程序的一些背景，我有一个运行Avada wp主题的WP安装。在主题中，div元素是用css图像背景构建的，但是这个主题的本质减少了对重编码的需求。这是我撞墙的地方，因为元素只能用css覆盖。但是，我想避免这样做，因为图像是从wp图像库动态插入的，以保持图像的响应;即桌面尺寸，平板电脑，手机等

据我所知，覆盖css意味着将URL硬编码到样式表中，从而破坏了响应能力。

我的研究

我花了一些时间在网上挖掘，但我遇到的解决方案似乎更难，或者实际使用时有点哈哈。经过进一步的挖掘，我能够偶然发现这个CSS Extend Rule。

但是，我对本文的理解是，使用@extend只需将新规则链接到现有类，只要计算规则即可。

答案可能非常简单，但我以前从未遇到过需要。非常感谢任何帮助。

编辑 - 2017年6月8日09:52

由于这个项目的性质有点时间敏感，我已经硬编码了财产及其价值，打破了责任感。这不是一个长期的解决方案，我将寻找更好的解决方案。对于所有迟到的人，我将在可预见的未来监控这个问题，所以请随时尝试回答。

/* -- Overide Currently in Use -- */
.post-content #main-hero {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url("https://www.url.com/image") !important;
}

Answer 1

如果你想用另一个元素覆盖图像，例如渐变色或背景色，你可以'作弊'

from tkinter import *
from tkinter import ttk

def change():
    print("change functon called")

def main():
    rootWindow = Tk()

    label = ttk.Label( rootWindow, text="Hello World!",
                       background = 'black', foreground = "white")
    label.pack()

    button1 = Button( rootWindow, text="Change Label",
                          background = 'black', foreground = "white", command=change)
    button1.pack()

    style = ttk.Style()
    style.configure("BW.TLabel", foreground="white", background="black")

    buttonTTK = ttk.Button( rootWindow, text="TTK BUTTON",style = "BW.TLabel", command=change)
    buttonTTK.pack()

    rootWindow.mainloop()

main()

 /* original css */
    .original {
        background-image: url(http://imageshack.com/a/img631/8360/WuQwuf.jpg);
    }

    /* extra css */
    .original{
        position: relative;
        width: 150px;
        height: 150px;
    }
    .original:before{
        position: absolute;
        content : "I am placed over the image";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 255, 0.9) 100%);
    }

Answer 2

你不需要任何js来做这件事。我可以用css做到这一点。我每天都会使用这些技术!! :)将内联css （仅背景图像属性）传递给动态更改背景图像所需的元素。

<div class="wrap">
     <div class="box" style="background-image: url(your/image/url.jpg)"></div>
     <div class="box" style="background-image: url(your/image1/url.jpg)"></div>
</div>

在你的CSS中你只需要这些代码行：

.box {
    display: inline-block;
    float:left;
    width: 50%;
    padding-top: 80%;

    // Important to keep
    background-position: center center;
    background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

如果您保留上述代码，则会对图片产生响应。

是否可以扩展/插入CSS属性值

2 个答案: