所以我想在頁面上制作一些花哨的卡片狀物體，并將來自JSON服務器的圖片作為它們的背景，但我找不到任何關于如何做到這一點的想法，需要一些幫助，如果它是可能的。我已經嘗試在JSX中添加一些樣式，但找不到將變數作為圖片的URL的方法。下面是一些代碼。第一個是用來從服務器獲取資料并顯示在頁面上，第二個是在頁面上顯示資料的方法。
這部分代碼的Scss檔案 uj5u.com熱心網友回復： 在你的CSS中的 然后在該元素上通過 而且你現在可以從代碼中洗掉span class="hljs-keyword">import { useEffect, useState } from "react"。
import ProductList from "./ProductList"/span>;
const Products = (/span>) => {
const [products, setProducts] = useState (null);
useEffect (() => {
fetch('http://localhost:8000/products'/span>)
.then(res => {
return res.json()。
})
.then(data => {
setProducts（資料）。
})
}, []);
return (
<div className="ProductList"/span>>
{產品&& <ProductList products={products}/>/span>}。
</div>>
);
}
export default Products;
const products = props.products;
return (
<div className="ProductList">
{products.map((product) => (
<div className="Product-Preview" key={product. id}>
<h2>{ product.title }</h2>
<p>{ product.description }</p>/span>
<img src={product. image} alt="no image" width="40%"/span> height="30%"/span>/>
<div> { product. price }</div><br />
</div>
))}
</div>>
);
}
export default ProductList;
.ProductList{
display: flex;
flex-direction: row;
justify-content: space-between;
& p{
width: 350px;
margin: 15px;
}
& .Product-Preview{
border: rgb(129, 129, 129) solid 0。 5px。
border-radius: 30px;
& h2, p, div{
text-align: center;
}
& div{
color: rgb(44, 38, 38) 。
font-weight: 600;
}
}
& .Product-Preview：hover{
transition: transform 0.5s easy-in-out, box-shadow 0.5s easy-in-out。
transform-style: preserve-3d;
box-shadow: 5px 5px 24px 0px rgba（0, 0,0, 0. 2）。)
}
.Product-Preview添加一些相關屬性& .Product-Preview {
border: rgb(129, 129, 129) solid 0.5px。
border-radius: 30px;
background-size: cover;
background-repeat: none;
style屬性添加影像作為背景<div。
className="Product-Preview"
key={product.id}
style={{backgroundImage: `url(${product.image})`}}。
>
img元素。
您可以添加一個容納背景圖片的元素，而不是直接將其設定在card上，并將該元素定位為填充卡片元素。這是為了避免在卡片上設定不透明度而影響到所有子元素。
類似于
的情況& .Product-Preview {
border: rgb(129, 129, 129) solid 0.5px。
border-radius: 30px;
overflow: hidden;
position: relative;
.backdrop {
background-size: cover;
background-repeat: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.25;
z-index:-1;
}
而且
<div。
className="Product-Preview"
key={product.id}
>
<div
className="backdrop"。
style={{backgroundImage: `url(${product.image})`}。
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309079.html
標籤：
下一篇：在火花中以零為前綴的列