如何将CSS实现的hero背景图样式转换为HTML行内样式？

问题解答 #

完全可以将上述CSS转换为行内样式使用，转换时注意以下要点：

1. 你原CSS的选择器是#main > header，而你提供的HTML中header标签id为header，且外层没有id为main的父容器，迁移时确认好样式要挂载的目标元素，直接把样式写入对应标签的style属性即可。
2. 行内样式不需要写选择器和包裹大括号，直接拼接CSS属性键值对即可，重复的background-image厂商前缀声明可以直接保留，浏览器会自动识别适配自身的规则。

转换后的完整HTML代码示例：

<header id="header" class="alt" style="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;">
  <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>

CMS适配优化建议

你可以将代码中url('../../images/banner.jpg')里的静态路径，替换为CMS后台对应图片字段的动态调用变量，后续在后台更新hero背景图时就会自动同步到行内样式中，无需手动修改代码。

内容的提问来源于stack exchange，提问作者Henry