CSS 中 background 属性合并正确写法

      发布在:前端技术      评论:0 条评论
<pre class="de1" style="box-sizing: border-box; overflow-wrap: normal; color: rgb(68, 68, 68); overflow: visible; padding: 0px; border: none; box-shadow: none; background-image: none; background-color: initial; font-family: Consolas, Monaco, &quot;Lucida Console&quot;, monospace; font-size: 12px; text-align: justify; margin-top: 0px !important; margin-bottom: 0px !important; line-height: 20px !important;"><span class="kw1" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(0, 0, 0); overflow: visible; box-shadow: none; font-weight: bold; margin: 0px !important; line-height: 20px !important;">CSS 中 background标准写法如下:<br/>background</span><span class="sy0" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(0, 170, 0); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">:</span> <span class="re0" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(204, 0, 204); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">#ff0000</span> <span class="kw3" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(153, 50, 204); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">url</span><span class="br0" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(0, 170, 0); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">(</span>/i/eg_bg_03.gif<span class="br0" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(0, 170, 0); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">)</span> <span class="kw2" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(153, 51, 51); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">no-repeat</span> <span class="kw2" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(153, 51, 51); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">fixed</span> <span class="kw2" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(153, 51, 51); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">center</span> / cover<span class="sy0" style="padding: 0px; border: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; overflow-wrap: normal; color: rgb(0, 170, 0); overflow: visible; box-shadow: none; margin: 0px !important; line-height: 20px !important;">;</span></pre><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">这些参数从左到右依次是:</p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">background-color</p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">background-image</p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">background-repeat</p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">background-attachment</p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">background-position / background-size<br/>一定要注意的是 background-size 是 CSS3 的属性,它要与 background-position 配合使用,中间有一个斜杠分隔符。。</p><pre style="background-color:#262e37;color:#ffffff;font-family:&#39;Consolas&#39;;font-size:11.3pt;"><span style="color:#66d9ef;font-style:italic;">background</span>: <span style="color:#a6e22e;">#ffffff </span><span style="color:#66d9ef;">url</span>(<span style="color:#fd971f;font-style:italic;">./chat.png</span>) <span style="color:#68e868;font-weight:bold;">no-repeat </span><span style="color:#ae81ff;">0 0</span><span style="color:#74ab30;">/</span><span style="color:#ae81ff;">41</span><span style="color:#68e868;font-weight:bold;">px </span><span style="color:#ae81ff;">40</span><span style="color:#68e868;font-weight:bold;">px</span>;</pre><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;">参考:<a href="https://www.2kss.com/34275.html">https://www.2kss.com/34275.html</a></p><p style="padding: 0px; border: 0px; background: rgb(255, 255, 255); box-sizing: border-box; color: rgb(102, 102, 102); font-family: Arial, 微软雅黑; text-align: justify; white-space: normal; margin-top: 8px !important; margin-bottom: 8px !important;"><a href="https://www.cnblogs.com/hello-web/p/7237765.html">https://www.cnblogs.com/hello-web/p/7237765.html</a></p><p><br/></p>
热门推荐