四个span重复的img

跟老师代码一样但是span内是四个重复的part of image。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgba(176,189,196,0.5);
    font-size: 15px;
    color: #3a2127;
    font-weight: 400;
    overflow-y: scroll;
}
a{
    text-decoration: none;
    color: black;
 
}
.clr{
    width:0;
    height: 0;
    overflow: hidden;
    clear: both;
}
.container{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.container > header{
    padding: 20px 30px 10px 30px;
    margin: 0px 20px 10px 20px;
    text-shadow: 1px 1px 10px rgba(0,0,0,.2);
}
.container > header > h1 {
    font-size: 35px;
    line-height: 35px;
    font-weight: 400;
    color: rgba(26,89,120,0.8);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1)
}
.container > header > h1 > span{
    color:rgba(26,89,120,0.4);
}
.p{
    padding: 14px;
}
.p  a {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 30px;
    background:rgba(92,180,224,0.7);
    font-weight: 800;
    color:#fff;
    margin: 10px 10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset;
}
.p a.currentDemo{
    background:rgba(255,255,255,0.9);
    color: #abcdef;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.0.1);
}
a:not(:first-child):hover{
    background:#4fa2c4;
}
.container > .cr-container{
    width: 600px;
    height: 400px;
    margin: auto;
    position: relative;
    border:20px solid white;
 
}
.cr-container > input{
    display: none;
}
.cr-container > label {
    font-style: italic;
    width: 150px;
    height: 30px;
    cursor: pointer;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 32px;
    margin-top: 340px;
    float: left;
    position: relative;
    z-index: 10;
}
.cr-container > label:before{
    content: '';
    width: 60px;
    position: absolute;
    height: 60px;
    border-radius: 30px;
    background:#abcdef;
    z-index: -1;
    left:46px;
    bottom: -15px;
    box-shadow: 0px 0px 5px rgba(255,255,255,0.3);
}
.cr-container  input:checked+label{
    color: #abcedf;
}
.cr-container  input:checked+label:before{
    background: white;
    box-shadow: 0px 0px 5px rgba(100,200,255,0.3);
}
.cr-container label:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 400px;
    position: absolute;
    right: 0;
    top: -340px;
    background: -webkit-linear-gradient(transparent, white);
    background: -moz-linear-gradient(transparent, white);
    background: linear-gradient(transparent, white);
    filter: progid:DXImageTransform:Microsoft.gradient(startColorstr="#00ffffff",endColorstr="ffffff",GradientType=0);
    background: -o-linear-gradient(transparent, white);
}
.cr-bgimg{
    width: 608px;
    height: 400px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-repeat: no-repeat;
}
 
.cr-bgimg > div{
    width: 150px;
    height: 400px;
    float: left;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
}

charr 2017-10-21

源自：CSS3图片切换特效 3-6 图片定位

收起

5回答

怎么都被占用了呢 2017-10-23 10:47:04

那我就不太明白你的意思了，本来你粘贴上来的代码，是没什么问题的。这个案例的效果是：每个div中的4个span都分别引入相同的4张图片，因为4个span是绝对定位在div中，所以4个div中都是第4个span在最上面，都显示的第4张图片。你是想呈现哪种效果呢？

收起回答

怎么都被占用了呢 2017-10-22 15:28:38

每个div中的4个span引入的图片是一样的，只是4个div引入的图片不一样

收起回答

提问者 charr #1

老师可是每一个div不是宽度只有图片的百分之25么，如果这样定义那就是说明选中1的时候宽度为150px 高度为400的div内所有span表示第一个图片，可是span不是重叠在一起的么？那就不是我们想表达的效果了呀

2017-10-23 03:33:47

提问者 charr 2017-10-21 13:08:25

效果是这样的

收起回答

提问者 charr 2017-10-21 13:06:48

.cr-bgimg div span{
    width: 100%;
    height:100%;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-repeat: no-repeat;
}
.cr-container > input.cr-selector-img-1:checked ~ .cr-bgimg , .cr-bgimg div span:nth-child(1){
    background: url(baby1.jpg);
 
}
 
.cr-container > input.cr-selector-img-2:checked ~ .cr-bgimg , .cr-bgimg div span:nth-child(2){
    background: url(baby2.jpg);
 
}
.cr-container > input.cr-selector-img-3:checked ~ .cr-bgimg , .cr-bgimg div span:nth-child(3){
    background: url(baby3.jpg);
 
}
.cr-container > input.cr-selector-img-1:checked ~ .cr-bgimg , .cr-bgimg div span:nth-child(1){
    background: url(baby4.jpg);
 
}

收起回答

提问者 charr 2017-10-21 13:04:39

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>make pics slide</title>
    <link rel="stylesheet" type="text/css" href="common.css">
    <link rel="stylesheet" type="text/css" href="style1.css">
 
</head>
<body>
<div class="container">
    <header>
    <h1>SLIDING IMAGE PANELS <span>WITH CSS3</span></h1>
    <p class="p">
        <a href="index.html" class="currentDemo">DEMO1</a>
        <a href="index2.html">DEMO2</a>
        <a href="index3.html">DEMO3</a>
        <a href="index4.html">DEMO4</a>
    </p>
    </header>
    <section class="cr-container">
        <input type="radio" name="radio-set" id="select-img-1" class="cr-selector-img-1" checked>
        <label for="select-img-1">1</label>
        <input type="radio" name="radio-set" id="select-img-2" class="cr-selector-img-2">
        <label for="select-img-2">2</label>
        <input type="radio" name="radio-set" id="select-img-3" class="cr-selector-img-3">
        <label for="select-img-3">3</label>
        <input type="radio" name="radio-set" id="select-img-4" class="cr-selector-img-4">
        <label for="select-img-4">4</label>
        <div class="clr"></div>
        <div class="cr-bgimg">
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
         
    </section>
 
</div>
</body>
</html>