文章/答案/技术大牛

发布

问如何正确添加背景色？
EN

Stack Overflow用户

提问于 2020-08-24 20:28:01

回答 1查看 43关注 0票数 0

我发现了一个免费的自定义单选按钮，它是我在自己的代码中实现的。但我正在努力让它工作，并且在功能上有一些问题。每当我向父对象添加背景色时，按下按钮时不会改变按钮的颜色。我尝试改变父对象的Z索引值和其他一些东西，但似乎都不起作用。

body{
  width: 100%;
  overflow-x: hidden;
  font-size: 17px;
  line-height: 30px;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
}

[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}

.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{
  position: relative;
  display: inline-block;
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  margin: 0 auto;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  color: black;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
}
.checkbox-tools:not(:checked) + label{
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-tools:checked + label{
  background-color: transparent;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
}
.checkbox-tools:not(:checked) + label:hover{
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
}
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: linear-gradient(298deg, yellow, green);
  z-index: -1;
}

/* .bg-color {
  background-color: grey;
  z-index: -999;
} */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    /> 
    
    <title></title>
  </head>

  <body>

    <div class="container bg-color">
      <div class="row pt-5">
        <div class="col-12">
          <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elhandel-button">          
          <label class="for-checkbox-tools" for="elhandel-button">
            <p>button 1</p>
          </label>
          <!--  -->
          <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elnät-button">
          <label class="for-checkbox-tools" for="elnät-button">
            <p>button 2</p>
          </label>
        <div>
      </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
  integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

  </body>

</html>

我发送的代码片段可以工作，但当bg-color类被启用时，它将停止工作。您将不再看到按钮变为线性渐变颜色。有什么解决方案吗？

提前感谢！

html

css

radio-button

回答 1

Stack Overflow用户

发布于 2020-08-24 20:41:19

这就是你要找的吗？我认为背景图像附加到了错误的CSS场景中，因为当您单击它时它应该是可见的，对吗？

我对它进行了编辑，并修复了过渡。我不能访问发生在正常过渡中的更改，所以我使用了一个真正的关键帧动画来获得相同的效果

body{
  width: 100%;
  overflow-x: hidden;
  font-size: 17px;
  line-height: 30px;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
}

[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}


.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{
  position: relative;
  display: inline-block;
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  margin: 0 auto;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  color: black;
   
}
.checkbox-tools:not(:checked) + label{
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-tools:checked + label{
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
   animation: example 300ms forwards;
}
.checkbox-tools:not(:checked) + label:hover{
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
}
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.bg-color {
  background-color: grey;
  z-index: -999;
}

@keyframes example {
  from {background-color: white;}
  to {background-image: linear-gradient(298deg, yellow, green);}
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    /> 
    
    <title></title>
  </head>

  <body>

    <div class="container bg-color">
      <div class="row pt-5">
        <div class="col-12">
          <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elhandel-button">          
          <label class="for-checkbox-tools" for="elhandel-button">
            <p>button 1</p>
          </label>
          <!--  -->
          <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elnät-button">
          <label class="for-checkbox-tools" for="elnät-button">
            <p>button 2</p>
          </label>
        <div>
      </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
  integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

  </body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63561060

复制

相似问题

问如何正确添加背景色？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确添加背景色？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确添加背景色？
EN