CSS - 点击效果 + 点击按钮更换背景

2019-07-07 18:40:26 阅读：227 来源： 互联网

标签：bg center 点击 background 按钮 0px margin CSS 255

.bg_x{
	background:url('./背景1.jpg' )no-repeat center;
	/*background:url('./背景2.jpg' )no-repeat center;*/
	background-size:cover;
	background-attachment:fixed;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-10;
}
.bg_y{
	/*background:url('./背景1.jpg' )no-repeat center;*/
	background:url('./背景2.jpg' )no-repeat center;
	background-size:cover;
	background-attachment:fixed;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-10;
}

body{
	text-align: center;
}

div{
	border-radius: 12px;
	width:80%;
	margin: 0 auto;
	/*text-align: center;*/
}


.modern {
	background-color:rgba(0,0,0,0.25);
	display:inline-block;
	position:relative;
	-webkit-box-shadow:0px 0px 0px 1px rgba(255,255,255,0.4)inset;
	-moz-box-shadow:0px 0px 0px 1px rgba(255,255,255,0.4)inset;
	margin:0 6px 7px 0;
	overflow:hidden;
}
.modern:hover {
	margin-top:-3px;
	margin-right:3px;
	margin-bottom:4px;
	margin-left:-3px;
	border:3px solid #000;
}
.modern:active {
	margin-top:-4px;
	margin-right:2px;
	margin-bottom:3px;
	margin-left:-4px;
	border:4px solid #000;
}
.button_x{
	weight:10px;
	height:20px;
	border-radius: 5px;
}
.button_x:hover{
	background-color: lime;
}

page.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
    
    <head>
        {% load staticfiles %}
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.5">
        <title>Welcome to this World！</title>
        <link rel="shortcut icon" href="./xx.ico" type="/Public/images/x-icon">
        <link rel="stylesheet" type="text/css" href="{% static "app/yy.css" %}">
        <script type="text/javascript" src="{% static "app/change.js" %}"></script>

    <body>
    	<bg id="bg" class="bg_x"></bg>
            <div class="modern">
	                <h2>Templates</h2>
	                <p>************************************************************************</p>
	                <p>************************************************************************</p>
	                <p>************************************************************************</p>
            	</div>
            </div>
            <br>
        <button class="button_x" onclick="change_bg_1()">背景1</button>
        <button class="button_x" onclick="change_bg_2()">背景2</button>
    </body>
</html>

更换背景原理：

点击按钮后，更改<bg>的class属性，同时在css文件中增加新属性(class)的样式；

function change_bg_1(){
	 document.getElementById('bg').className="bg_x";
}

function change_bg_2(){
	document.getElementById('bg').className="bg_y";
}

标签：bg,center,点击,background,按钮,0px,margin,CSS,255
来源： https://blog.csdn.net/qq_42292831/article/details/95011522

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS - 点击效果 + 点击按钮更换背景