Question

我正在尝试将李子的图像放在树上作为其他页面的链接。我尝试了很多不同的方法，我确信它是容易的，但我的图像总是在屏幕的底部。我希望内部链接绝对放在菜单图片上。这是我现在的代码。删除了div和css以消除混淆。

<!DOCTYPE html>

<html>

<head>
<title></title>
<style type="text/css">
html, body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica   Neue",       Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
width: 99%;
height:100%;
}

.css-slideshow{
border:3px solid;
border-color:#035747;
position: relative;
left:0;
right:0;
max-width: 100%;
width:100%;
height: 82%;
margin: 0;
}

.css-slideshow figure{
margin: 0;
height: 100%;
width:100%;
background: #000;
position: absolute;
}
.css-slideshow img{
box-shadow: 0 0 2px #666;
}

.css-slideshow-attr{
max-width: 495px;
text-align: right;
font-size: .7em;
font-style: italic;
margin:0 auto;
}
.css-slideshow-attr a{
 color: #666;
 }
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 42s 36s infinite;
}
figure:nth-child(2) {
animation: xfade 42s 30s infinite;
}
figure:nth-child(3) {
animation: xfade 42s 24s infinite;
}
figure:nth-child(4) {
 animation: xfade 42s 18s infinite;
}
figure:nth-child(5) {
animation: xfade 42s 12s infinite;
}
figure:nth-child(6) {
 animation: xfade 42s 6s infinite;
}
figure:nth-child(7) {
animation: xfade 42s 0s infinite;
}


@keyframes xfade{
0%{
opacity: 1;
}
25% {
opacity:1;
}
45% {
opacity:0;
}
65%{
opacity: 0;
}
100% {
opacity:1;
}
}

.menu{
position:relative;
width: 100%;
height: 100%;
border:3px solid;
border-color:#035747;
margin:0;
display: block;
}

.interior{
position:absolute;
left: 35px;
top: 35px;
}

</style>

</head>

<body>


<div class="css-slideshow"> 
<figure> 
<img src="Balc.jpg"  width="100%" height="100%" />   
</figure> 
<figure> 
<img src="Rock w Column.jpg"  width="100%" height="100%" />    
</figure> 
<figure> 
<img src="pool.jpg"  width="100%" height="100%" />  
</figure> 
<figure> 
<img src="Purple white flowers_jefferson.jpg"  width="100%" height="100%"    />
</figure> 
<figure> 
<img src="lawn_Wickson.jpg" width="100%" height="100%"  />  
</figure> 
<figure> 
<img src="path.jpg"  width="100%" height="100%"   />  
</figure> 
<figure> 
<img src="flowers toward wickson.jpg" width="100%" height="100%" />
</figure> </div>

<div class="menu" >
<img src="three_trees_without_plums.jpg" width="100%" height="100%" />
</div>

<a HREF="interiors.html"><IMG SRC="plum.png"></a>

</body>
</html>

我需要放置在所有屏幕尺寸上保持位置的div。任何帮助将不胜感激。

Answer 1

我不知道你到底想要做什么以及为什么每个人都要＆＃34;李子＆＃34;当它们应该更小时，它是100％宽和高。

这是我最好的尝试：

DEMO

<div class="css-slideshow">
    <figure style="top:10%;left:20%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:20%;left:22%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:43%;left:46%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:25%;left:10%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:60%;left:30%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:50%;left:70%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
    <figure style="top:70%;left:90%">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00aaaa&txtclr=ffffff&txt=plum&w=80&h=80&txttrack=0" />
    </figure>
</div>

我添加了占位符图片并将其设为80px x 80px。然后绝对位置来自内联样式，作为父项的百分比。我也加快了这个演示的动画。

祝你好运！

Div作为链接放置在精确位置的图像上

1 个答案:

DEMO