我有一個用于英雄背景影像的 CSS：
#main > header {
padding: 12em 0 10em 0 ;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
是否可以將其轉換為線條樣式方案？
這是我的 HTML：
<header id="header" class="alt">
<h1><a href="index.html">Spectral</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
我需要這樣做的原因是因為我正在將靜態 HTML 站點轉換為 CMS 并管理我需要添加某些標簽的影像。感謝您對此的所有答復和指導...
uj5u.com熱心網友回復：
嘗試使用如下所示的行內樣式，您可以輕松地將影像路徑更改為動態
header {
padding: 12em 0 10em 0 ;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}<header id="header" class="alt" style='background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");'>
<h1><a href="index.html">Spectral</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header> 如果有其他問題，請告訴我。
uj5u.com熱心網友回復：
檢查我的方法。通過這種方式，您可以將影像鏈接到 CMS。您可以在 html 之前或之后使用樣式標簽。
<style>
#main > header {
padding: 12em 0 10em 0 ;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
</style>
<header id="header" >
<h1><a href="index.html">Spectral</a></h1>
<nav id="nav">
<ul>
<li >
<a href="#menu" ><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362873.html