javascript - 如何去除 HTML 页面的背景色？

问题描述

我正在为一个辅助项目创建一个 Web 应用程序，但不确定如何删除每个图像后面的灰色背景颜色。为了测试后端，我使用 CSS 和 JavaScript 实现了我的 HTML 页面。我不确定是否需要从 CSS 或 JavaScript 代码更改它..

我通过将背景颜色设置为白色或透明来尝试一切，但它似乎无法正常工作。

HTML

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Good Cop, Bad Cop</title>
  <style>
    .view-image img {
      margin-left: 90px;
    }
  </style>
  <link rel="stylesheet" href="../css/landing.css" />
  <link rel="stylesheet" href="../css/coach_selection.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

</head>

<body>
  
  <div class="image">
    <div>
      <button type="button" id="dog-button" class="btn btn-light">
        <img src="../images/dog.png" id="dog" alt="dog">
      </button>
    </div>
    <div>
      <button type="button" id="mother-button" class="btn btn-light">
        <img src="../images/mother.png" id="mother" alt="mother">
      </button>
    </div>
    <div>
      <button type="button" id="soldier-button" class="btn btn-light">
        <img src="../images/military.png" id="soldier" alt="soldier">
      </button>
    </div>
    <div>
      <button type="button" id="teacher-button" class="btn btn-light">
        <img src="../images/teacher.png" id="teacher" alt="teacher">
      </button>
    </div>
    <div class="view-image" style="display:none;">
      <img src="" width="150" height="150" />
      <div class="button" id="button-other"><span>Other</span></div>
    </div>
  </div>
  <div class="button" id="button-confirm" onclick="redirectHome()">
    <span>Confirm</span>
  </div>
  
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"></script>
    
    <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
    <script src="../scripts/FireBase_API.js"></script>
    <script src="../scripts/coach_scripts/coach_selection.js"></script>
    
</body>

</html>

CSS

.image {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  margin-top: 40px;
  margin-left: 50px;
}

.image img {
  cursor: pointer;
}

.image img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image #mother img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image img {
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 10px;
  margin-left: 30%;
}

.button{
  width: 80px;
  height: 40px;
  margin: 10px auto 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

.button:hover{
   background-color: #242424;
}
.button:active{
   background-color: #121212;
}

.button > span{
  color: #eeeeee;
  text-align: center;
}

JavaScript

var elementSelected = null;
var typeSelected = false;

$(document).on('click', '.image > img', function(){
  $('.image > img').each(function(){
    $(this).removeClass('active');
  })
  $(this).addClass('active');
  elementSelected = $(this);
  typeSelected = false;
});

$(document).on('input', '#text-src', function(){
  $('.image > img').each(function(){
    $(this).removeClass('active');
  })
  elementSelected = $(this);
  typeSelected = true;
})

$(document).on('click', '#button-confirm', function(){
  $('.image').hide();
  if(typeSelected == true){
    $('.view-image > img').attr('src', elementSelected.val());
    $('.button').hide();
  }
  else{
    $('.view-image > img').attr('src', elementSelected.attr('src'));
  }
  $('.view-image').fadeIn('high');
})

$(document).on('click', '#button-other', function(){
  $('.view-image').hide();
  $('.image').fadeIn('high');
})

标签： javascripthtmlcss

javascript - 如何去除 HTML 页面的背景色？

问题描述

解决方案

推荐阅读