css 我怎样才能制作一个网页，可以生成特定于特定位置随机图像？

p5cysglq 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(126)

我想做一个网页，有多个图像框。每个框应该生成随机图像，但是它们应该是特定于特定位置或地点的，如一个图像框生成自由女神像的随机图像，另一个图像框应该生成泰姬陵的随机图像。等等。
我尝试使用“unsplash随机图像生成器url”生成，但这些并不特定于特定的地方。这是我的代码

*{
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(https://source.unsplash.com/random/900×900/?nature,scene,greenland,snowland);  */
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: rgb(244,244,244);
}

.container{
    max-width: 1200px;
    margin:0 auto;
    padding:20px;
     overflow-x: hidden;
    /* overflow-y: auto; */ 
}

.container h1{
    text-align: center;
    /* font-size: ; */
    margin: 2rem 2rem;
    font-size: 4rem;
    letter-spacing: 4px;
}

.gallery{
    display: flex;
    position:relative;
    /* height:100%; */
    flex-wrap: wrap;
    justify-content: space-between;
  
}

.image-box{
   height: 393px;
    width:32%;
    margin-bottom:20px;
    /* border:2PX SOLID YELLOW; */
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}

.image-box img{
    height:100%;
    width:100%;
    filter: grayscale(100%);
    box-shadow: 0 0 20px #333;
   object-fit: cover;
   max-height: 100%;
   max-width:100%;

}

.image-box:hover{
    cursor: pointer;
    transform: scale(1.03);
    transition: 0.5s;
    filter: drop-shadow(10px 10px 10px #333);
}

.image-box:hover img{
    filter: grayscale(0%);
}

.image-box figcaption{
    opacity: 0;
    position: absolute;
    bottom:0;
    left:0;
    color: aliceblue;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    width:100%;
    padding:20px;
    font-size: 1.4rem;
    font-weight: 900;

}

.image-box:hover figcaption{
    opacity: 1;
    transition: 1s;
   

}

<body>

    <div class="container">
        <h1>My Gallery</h1>
        <div class="gallery">
            <figure class="image-box">
                <img src="https://source.unsplash.com/random/300×300/?tajmahal" alt="image1">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <figcaption>image1</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?shillong,arunachal-pradesh,valley, natural-scenes
                    " alt="image1">
                <figcaption>image2</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?rajasthan, palaces, natural-scenes" alt="image1">
                <figcaption>image3</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?mountain, india, scenes, nature" alt="image1">
                <figcaption>image4</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?lucknow, kashi, agori, kumbh-mela" alt="image1">
                <figcaption>image5</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kedarnath,kedarnath-view, lord-shiva" alt="image1">
                <figcaption>image6</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?delhi, city-life, beautiful-images, new-delhi, jantar-mantar, red-fort, parliament" alt="image1">
                <figcaption>image7</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?aganta-caves, allora-caves" alt="image1">
                <figcaption>image8</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kashmir, dal-lake" alt="image1">
                <figcaption>image9</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kerala, tamilnadu, south-india-nature"
                    alt="image1">
                <figcaption>image10</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?beautiful-nature, india's-most-beautiful-places"
                    alt="image1">
                <figcaption>image11</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?lotus-temple
" alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?gwalior-fort
                " alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?mehrangarh-fort" alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?pangong-lake
                " alt="image1">
                <figcaption>image12</figcaption>
            </figure>

           
        </div>
    </div>

</body>

这里也是生成的网页---enter image description here
请回答我怎样才能最简单地做到这一点？

css

来源：https://stackoverflow.com/questions/76525428/how-can-i-make-a-web-page-which-can-generate-random-images-specific-to-particula

2条答案

按热度按时间

w8biq8rn1#

这是一个随机的图片API，包含自然，汽车等类别。你可以使用这个API来获取ramdom图像和与类别相关的图像。

赞(0）回复(0）举报 2023-06-25

qvk1mo1f2#

我通常使用loremflickr。有时标记不是100%准确（特别是对于小图片），但它是免费的，所以我可以接受。

<img src="https://loremflickr.com/300/300/tajmahal?random=1">
<img src="https://loremflickr.com/300/300/tajmahal?random=2">
<img src="https://loremflickr.com/300/300/tajmahal?random=3">
<img src="https://loremflickr.com/300/300/tajmahal?random=4">
<img src="https://loremflickr.com/300/300/tajmahal?random=5">

赞(0）回复(0）举报 2023-06-25

我来回答

css 我怎样才能制作一个网页，可以生成特定于特定位置随机图像？

2条答案

相关问题

热门标签

最新问答