链接到背景图片

时间:2018-04-11 07:05:59

标签: html css image background background-image

我希望我放在主背景上的每个小图片都是可链接的。问题是它们在代码中也被称为背景(不知道如何以其他方式进行)。有没有办法让每个人都可以点击,里面有不同的链接?提前谢谢。

    body,
    html {
     height: 100%;
     margin: 0;
    }

    body {
     background-image: url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"),
     url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"), 
    url("https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png"), 
    url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/yI9FRzo/vertical-pan-of-red-lentils-on-white-background-2-this-video-was-shoot-using-custom-light-set-up-with-additional-custom-build-underneath-light-system-to-eliminate-shadows_nkcfxbgmx__F0000.png");
      height: 15%, 10%, 20%, 20%;
      background-position: 397px 30%, 540px 17%, 683px 30%, 0px 0px;
      background-repeat: no-repeat;
      background-size: 5%, 5%, 5%,cover;
    }

3 个答案:

答案 0 :(得分:0)

在HTML中创建<div></div>,每个div都有自己的背景图片,然后根据需要进行组织。

答案 1 :(得分:0)

您可以将小图像作为元素添加,方法是将它们添加到正文标记

<body>
    <div id="smallimg1" class="smallimg">
        <a href="yourlinkhere" target="_blank">
            <img src="linktoimghere.jpg" alt="" />
        </a>
    </div>
</body>

如果你真的希望它们是backgroundimages而不是img,那么将它们添加为div的背景并添加backgroundimage,以及通过css的高度和宽度。

答案 2 :(得分:0)

它必须是css url吗?

另一个解决方案是在html中创建它,然后另外设置样式

 An image as a link: <a href="https://link.com">
<img border="0" alt="img" src="logo.jpg" width="100" height="100">
</a>