所以我正在使用一個組件，我想在組件 home.jsx 中有一個背景影像，然后當我登錄頁面時，我使用另一個名為 home_logged.jsx 的組件，我不想要背景影像但檔案互相傳染
這是 home.css 的 css
body
{
background-color:#EFEFEF ;
background-image:url("../../images/dog.jpeg");
background-size:cover ;
background-repeat: no-repeat;
background-position: 20px 15px;
height: 610px;
}
.head-div
{
margin-top:9rem;
}
h1
{
font-size: 50px;
padding-left: 80px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
color: rgb(141, 82, 15);
}
p
{
line-height: 19px;
padding-left: 80px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
color:#ffca2c;
}
.btn-warning
{
margin-top:20px;
margin-left: 80px;
color:blanchedalmond;
font-weight: bold;
box-shadow: 5px 3px 10px #363631;
padding-left: 25px;
padding-right: 25px;
border-radius: 44px;
}
這是我的 home_logged.css
body
{
background-color:#EDEDED ;
background-image: none;
}
#row_home_logged
{
margin-top: 7rem;
}
#doggy
{
background-image:url("../../images/doggy.png");
background-color: #8ACAD9;
background-size: 329px ;
background-repeat: no-repeat;
}
#catty
{
background-image:url("../../images/catty.png");
background-color:#F8B8B8;
background-size: 300px ;
background-repeat: no-repeat;
}
#mixed
{
background-image:url("../../images/mix.png");
background-color:#F8C808;
background-size: 225px ;
background-position-x: 20px;
background-repeat: no-repeat;
}
.dogh3
{
padding-left: 300px;
margin-top: 220px;
color:rgb(39, 39, 39)
}
.link1
{
padding-left : 300px;
text-decoration:none;
color: aliceblue;
display: block;
padding-bottom: 0px;
font-size: 20px;
}
._link1
{
display: block;
padding-left : 300px;
color: aliceblue;
margin-bottom: 38px;
line-height: 0px;
}
.mixh3
{
padding-left: 236px;
margin-top: 220px;
color:rgb(39, 39, 39)
}
.mix1
{
padding-left: 236px;
text-decoration:none;
color: aliceblue;
display: block;
padding-bottom: 0px;
font-size: 20px;
}
._mix1
{
display: block;
padding-left: 236px;
color: aliceblue;
margin-bottom: 38px;
line-height: 0px;
}
所以我需要知道如何將身體分開
uj5u.com熱心網友回復：
您可以在 JSX 檔案本身中維護影像狀態，并使用data-*與 css 檔案共享它。
我分享了一個關于如何使用 javascript 傳遞影像背景影像的小例子。
var list = document.querySelectorAll("div[data-image]");
for (var i = 0; i < list.length; i ) {
var url = list[i].getAttribute('data-image');
list[i].style.backgroundImage="url('" url "')";
}div[data-image] {
width: 100px; height: 100px; /* If needed */
border: 2px solid black;
}<div data-image="https://images.unsplash.com/photo-1638913972776-873fc7af3fdf?auto=format&fit=crop&w=100&q=100"></div>uj5u.com熱心網友回復：
嘗試將背景樣式放在 html 樣式引數中，它在我這邊作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400030.html
標籤：javascript css 反应