我想在一些选定的元素之前放置一些SVG图像.我正在使用JQuery,但这是无关紧要的.我想将:before元素作为:
#mydiv:before {
content:"<svg.. code here</svg>";
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
如果我如上所示,它只显示字符串.我检查了规格,似乎对内容有什么限制.是否有解决此限制的工作？只有内容css与我的问题相关.
Run Code Online (Sandbox Code Playgroud)/* <uri> value */ content: url(http://www.example.com/test.html);
题:
可以在元素的css content属性处显示图像的值htmlurl()content
.content {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}<div class="content"></div>例如,或者content在伪元素处使用属性::before
.content::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}<div class="content"></div>是否可以呈现.html文档,.html元素在css content？
.content {
content: url(data:text/html,abc);
}<div class="content"></div>另请参见CSS生成的内容模块级别3
该
content属性指示在元素或伪元素内呈现的内容.它采用逗号分隔的URI列表,后跟空格分隔的标记列表.如果提供了多个URI,则依次尝试每个URI,直到找到可用和支持的值.如果其他值失败,则最后一个值用作后备.<uri>对于值的最后一个逗号分隔部分中的URI以外的URI,如果URI可用且支持格式,则元素或伪元素将成为替换元素,否则,逗号中的下一个项目将被分隔列表被使用,如果有的话.
例4
h1 { content: url(header/mng), url(header/png), none; }在上面的示例中,如果
header/mng不是支持的格式,则header/png可以使用它.在上面的示例中,如果header/png也不可用,则<h1>元素将为空,因为最后一个替代是none.要使元素回退其内容,您必须显式提供内容作为后备: …
鉴于下表:
<table id="incidents">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
使用jQuery,以下评估为false:
$("#incidents tbody").is(":empty")
我想使用CSS将内容设置为消息:
#incidents tbody:empty {
content: "<tr>message foo</tr>";
}
可以:empty选择适用于TBODY？
我已经设置了一个CSS元素来插入一些内容,通过:
.foo:after {
content: "Bold, italics";
}
我希望单词"Bold"以粗体字体重量呈现,单词"italics"以斜体字体样式呈现.我知道可以添加行:
font-weight: bold;
font-style: italics;
但这会使两个词都变得粗体和斜体.如果我可以在内容字段中使用html元素,我会添加如下内容:
content: "<strong>Bold</strong>, <em>italics</em>"
但唉,这是不可能的.
有没有其他方法来实现这种效果？理想情况下,无需调用javascript,纯粹使用html/css.