html 完全响应的横幅，横幅内有可点击的元素

Posted 2021-05-11

div#header-area {
    background-image: url(http://aysp.wpengine.com/wp-content/uploads/2017/07/background.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: auto;
    background-color: transparent;
    /*padding-bottom: 13%;*/
    display: block;
}

.header-img {
    max-width: 21.4%;
    position: relative;
    margin-left: 8%;
    padding-bottom: 1%;
float:left;
}

.header-button {
    max-width: 24.5%;
    position: relative;
    margin-left: 5.6%;
float:left;
margin-top: 4%;
}

.header-text {
    max-width: 26.6%;
    position: relative;
    margin-left: 2%;
    padding-bottom: 2%;
float:left;
margin-top: 6%;
}

.header-icon {
    max-width: 3%;
    position: relative;
    padding-bottom: 2%;
float:right;
    margin-top: 11%;
    margin-right: 1%;
}

<div id="header-area">
	<div class="container header-container">
		<img class="header-img" src="http://aysp.wpengine.com/wp-content/uploads/2017/07/logo.png">
		<img class="header-text" src="http://aysp.wpengine.com/wp-content/uploads/2017/07/crazyText.png">
		<a href="http://aysp.wpengine.com/schedule/"><img class="header-button" src="http://aysp.wpengine.com/wp-content/uploads/2017/07/buttonWithShadow.png"></a>
		<a href="https://www.facebook.com/AtYourServicePlumbing"><img class="header-icon" src="http://aysp.wpengine.com/wp-content/uploads/2017/07/facebook.png"></a>
		<div style="clear:both"></div>
	</div>
</div>