[英]How to remove the background colour of HTML page?
我正在為一個輔助項目創建一個 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');
})
淺灰色由相應按鈕元件上的 class btn-light
提供。 這個 class 在 bootstrap.min.css 中定義。 如果刪除它,按鈕的樣式將默認設置,沒有背景顏色。
它來自您的 css 按鈕元素。
.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;
}
只需刪除背景顏色。
我想你想對你的圓形圖像有 hover 效果。 您只需要將半徑添加到圖像和按鈕元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.