background-position 不生效的问题

background-position 不生效的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta  name="viewport" content="width=device-width,initial-scale=1.0">
<title>CSS3实现图片滑动效果</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="container">
<header>
<h1>Slibing Image Pannels <span>with CSS3</span></h1>
<nav >
<a href="index.html" class="current-demo">Demo1</a>
<a href="index2.html">Demo2</a>
<a href="index3.html">Demo3</a>
<a href="index4.htmml">Demo4</a>
</nav>
</header>
<section>
<div class="main">
<input type="radio" id="select-img-01"  name="selectimg" class="selectImg-01" checked>
<label for="select-img-01">1</label>
<input type="radio" id="select-img-02"  name="selectimg" class="selectImg-02" >
<label for="select-img-02">2</label>
<input type="radio" id="select-img-03"  name="selectimg" class="selectImg-03"  >
<label for="select-img-03">3</label>
<input type="radio" id="select-img-04"  name="selectimg" class="selectImg-04" >
<label for="select-img-04">4</label>

<!-- 背景区域 -->
<div class="back">
<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>
</div>

</section>
</div>
</body>
</html>
/* CSS reset */
/* 考虑性能优化问题，所以不使用通配符*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
ol,ul {
	list-style:none;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	/*h标签默认粗体*/
	font-weight:normal; 
}
a{
	text-decoration: none;
}
/*公共页面样式*/
body{	
	background: url(../images/bg.jpg);
	font-size:15px;
	font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
}
.container{
	width:100%;
	height:100%;
	overflow-y: scroll; /*当y轴溢出的时候出现滚动条*/
	text-align: center; /*当子元素不存在时候，自动应用父级样式*/
	position: relative;
}
.container > header{
	padding:20px 20px 10px 20px;
	margin-bottom: 30px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2); /*给文字加上阴影效果*/
}
.container > header > h1{
	font-size:35px;
	line-height:35px;
	padding-bottom: 10px;
	color:rgba(26,89,120,0.8);
}
.container > header > h1 >span{
	color:#7cbcd6;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header > nav{
	padding: 14px;
}
.container > header > nav > a{
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 11px;
	background: rgba(104,171,194,0.5);
	border-radius: 50%;
	color: #fff;
	font-style: italic;
	font-weight: 800;
	margin: 0px 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset;
}
.container > header > nav > .current-demo,
.container > header > nav > .current-demo:hover{
	color:rgba(104,171,194,0.5);
	background: rgba(255,255,255,0.9);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.container > header > nav > a:hover{
	color:#fff;
	background: #4fa2c4;
}
.main{
	width:600px;
	height: 400px;
	border: 20px solid #fff;
	margin: 30px auto;
	position: relative;
}
.main > input {
	display: none;
}
.main > label{
	display: block;
	width: 150px;
	height: 30px;
	float: left;
	margin-top: 350px;
	color:#fff;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	position: relative;
	z-index: 1000;
	text-align: center;
	line-height: 30px;
}
.main > label:before{
	width: 30px;
	height: 30px;
	display: block;
	background: rgba(104,171,194,0.5);
	border-radius: 50%;
	content: "";
	position: absolute;
	left:50%;
	margin-left: -13px;
	z-index: -1;
	box-shadow:0 0 0px 4px rgba(255,255,255,0.5);
}
.main > input:checked + label{
	color:#68abc2;
}
.main > input:checked + label:before{
	background: #fff;
	box-shadow:0 0 0px 4px rgba(104,171,194,0.5);
}
.main > label:after{
	content: "";
	display: block;
	width: 1px;
	height: 400px;
	position: absolute;
	top: -350px;
	right: 0;
	background: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.8));
	background: -moz-linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.8));
	background: -o-linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.8));
	background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.8));	

}
.main > label:last-child:after{
	width:0; /*最后一个不需要白线*/
}
.main > .back{
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	-webkit-transition:left 0.5s ease-in-out;	
	-moz-transition:left 0.5s ease-in-out;	
	-o-transition:left 0.5s ease-in-out;	
	transition:left 0.5s ease-in-out;	
}
.main > .back > div{
	width: 150px;
	height:400px;
	overflow: hidden;
	position: relative;
	float: left;
	
}
.main > .back > div > span{
	width:100%;
	height: 100%;
	display: block;
	float: left;
	position: absolute;
	top:0;
	left: -150px; /*往右平移时候用*/
	background-repeat: no-repeat;
	
}
/*点input被选中后 同步背景选择*/
.main > input.selectImg-01:checked ~ .back,
.main > .back > div > span:nth-child(1){
	background: url(../images/1.jpg) no-repeat;
}
.main > input.selectImg-02:checked ~ .back,
.main > .back > div > span:nth-child(2) {
	background: url(../images/2.jpg) no-repeat;
}
.main > input.selectImg-03:checked ~ .back,
.main > .back > div > span:nth-child(3) {
	background: url(../images/3.jpg) no-repeat;
}
.main > input.selectImg-04:checked ~ .back,
.main > .back > div > span:nth-child(4) {
	background: url(../images/4.jpg) no-repeat;
}

/*每个div下的span做平移*/
.back > div:first-of-type > span {
	background-position: 0px 0px ;
}
.back > div:nth-of-type(2) > span {
	background-position: -150px 0px ;
}
.back > div:nth-of-type(3) > span {
	background-position: -300px 0px ;
}
.back > div:nth-of-type(4) > span {
	background-position: -450px 0px ;
}

.main > input.selectImg-01:checked ~ .back > div > span:nth-child(1),
.main > input.selectImg-01:checked ~ .back > div > span:nth-child(2),
.main > input.selectImg-01:checked ~ .back > div > span:nth-child(3),
.main > input.selectImg-01:checked ~ .back > div > span:nth-child(4){
	
	left:0px;
	z-index: 10;
}
qq_ToutAn諾尘_0 2018-05-30
源自：CSS3图片切换特效   3-9 transition实现当前图片飘入动画
13
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
妮可妮可妮_ 2018-05-30 15:20:15

http://img1.sycdn.imooc.com//climg/5b0e50230001798105660255.jpg

因为这两个设置起了冲突,上面的权重要比下面的高,所以没有生效

0
收起回答
  • 提问者 qq_ToutAn諾尘_0 #1
    background 包含他所有的子属性吗，比如 background-repeat background-position 等等。。
    2018-06-01 18:40:16
  • 提问者 qq_ToutAn諾尘_0 #2
    怎么才能避免这种问题，导致因为属性权重低 而被覆盖的问题
    2018-06-01 18:42:59
  • 妮可妮可妮_ 回复 提问者 qq_ToutAn諾尘_0 #3
    background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性： background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image 如何避免出现属性权重低被覆盖的问题就需要同学自己总结出自己的代码习惯啦~比如在设置统一样式时,可以选择权重较小的设置方式,也可以在控制台检查是否有出现因为权重问题没有作用上的设置.
    2018-06-01 18:53:08
提问者 qq_ToutAn諾尘_0 2018-05-30 13:22:00

http://img1.sycdn.imooc.com//climg/5b0e347f0001cb3009100819.jpgF12 background-position 被划掉了，不生效

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

background-position
57 0 4
background-position 的问题
5 0 4
background-position
42 0 1
代码无法实现js效果，请问是有什么问题
0 0 4
为什么我的background-size和background-position会失效呢？
0 0 1

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师