Question

我在后台有一张图片。我需要根据它来决定一些div的颜色。我怎样才能直接在CSS中实现它而不是任何脚本或CSS框架

if (isBackImgTower){
    color:#fff; //(then i want to apply the color #fff)
}
else{
    color:#000;
}

Answer 1

根本没有。 CSS不支持逻辑。

所以你需要一个像SASS/SCSS这样的简单逻辑的css预处理器。

示例SCSS [这可能无法给出确切的答案 - 但只是为了得到一个想法] ，

$isBackImgTower: true;

div {
  @if $isBackImgTower == true {
    color: #fff; 
  } @else {
    color: #000;
  }
}

但为什么不简单地使用具有background-image属性的类？有什么理由吗？

实施例，

div {
    color: #000;
}
div.isBackImgTower {
    background-image:url('images/tower.jpg');
    color: #fff;
}

Answer 2

你不能。但您可以使用此模式来实现这一目标：

.background-tower{
    background-image:url('tower.jpg');
}

.background-sky{
    background-image:url('sky.jpg');
}

.background-tower, .background-tower a /* <--a tags inside tower */{
    color:#fff;
}

.background-sky {
    color:#000;
}

几乎你的html应该是这样的：

<div class='background-tower'>
    <a href="#">some text</a>
    some other text,...
</div>

Answer 3

首先查看css medai查询。如果你无法找到自己的需求，可以使用jquery或替代方案。例如

if ($("#samplediv").attr("data-state") == "a value") {
$("#samplediv").addClass("class-for-a-value");
} else {
$("#samplediv").addClass("class-for-not-a-value");
}

这是一个逻辑改变css类。你不能只使用css

我们可以在不使用任何框架的情况下在css中给出if else条件

3 个答案: