仅为HTML元素的一部分着色

Question

我将如何仅background-clip使用CSS来着色HTML元素的一部分.

我看起来像:

div {
   background-image: url('mi_image');
   ***: 50% 30em; /* Background only covering 50% height and 30em width */
}

如果有必要,我也会接受JavaScript解决方案 - 但纯CSS会更好.

Answer 1

我会创建一个背景 div。考虑这个 HTML：

\n\n

<div id="outer-container">\n    <div id="container-background"></div>\n    <div id="container">\n        <p>\n            Here\'s some of my interesting text        \n        </p>    \n    </div>\n</div>\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n\n

有了这个CSS：

\n\n

<style type="text/css">\n    #outer-container {\n        height: 300px;\n        width: 300px;\n        border: 1px solid black;\n        position: relative;\n        overflow: hidden;\n    }\n    #container-background {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        background-color: #FF0000; /* Use background-image or whatever suits you here */\n        width: 50%; /* Your width */\n        height: 200px; /* Your height */\n        z-index: -1;\n    }\xe2\x80\x8b\n</style>\n

\n\n

要创建这样的结果：

\n\n

\n\n

JSFiddle 演示

\n