小编fan*_*are的帖子

将css应用于html而不是iframe html

我正在为附件"时尚"制作一个用户样式表.

它在整个页面上应用半透明暗盒进行夜间浏览.

我正在使用:

html:before {
    content:url()!important;
    position:fixed!important;
    width:100%!important;
    height:100%!important; 
    top:0!important; 
    left:0!important; 
    background:rgba(2,3,3,.35)!important; 
    z-index:99999999999999999!important;
    pointer-events:none!important;
}
Run Code Online (Sandbox Code Playgroud)

创建固定的,重叠的div.

这很好用,但是,如果网站中有任何iframe,它会将此代码应用到iframe的HTML中,您可以在此处看到:

因为这些社交网络小部件依赖于IFRAME,它将代码重复到这些页面中,创建了我所制作的半透明暗盒的双重覆盖.

所需的外观将是:

我尝试了很多东西,例如将更高的z-index应用于iframe,并将iframe中任何内容的背景颜色和背景指定为'white'和'opaque',以便它'浮动'父html页面的顶部,但这不能很好地工作.我也试过类似的东西:

html:not(iframe):before{}
Run Code Online (Sandbox Code Playgroud)

但这也行不通.我想知道是否有办法以不依赖'html:before'来创建相同效果的方式做我正在尝试做的事情,或者是否有办法做到但没有它在页面上的iframe的html内重复.

我已经用尽了努力让它发挥作用,所以任何帮助都会非常感激.谢谢.

html css firefox pseudo-element css-content

7
推荐指数
1
解决办法
2161
查看次数

如何使用<span>缩进后续文本行

我正在努力将CSS应用于朋友的网络聊天室应用程序.

下面代表了当前的情况,以及我理想的情况.

问题和目标

我必须使用的HTML非常简单,我必须使用3个元素,'time''昵称''message'.

这就是每个聊天行的产生方式:

<div><span id="time">10:00</span><span id="nickname">tom</span><span id="message">message</span></div>

这绝对不是最实用的HTML,我认为更好的解决方案是将每一行包装在一个表中,其中'time'将是一列,'nickname'和'message'将在另一列中.但我很好奇这种事情是否可以纯粹用CSS和我现在必须使用的HTML来完成.我已经接近每个跨度都有"display:table-cell"......例如

<div><span id="time" display:table-cell>10:00</span><span id="nickname" display:table-cell>tom</span><span id="message" display:table-cell>message</span></div>

几乎


但是..消息包装与消息对齐,我希望它包含在昵称下面.任何css技巧想法会产生我正在寻找的效果?

谢谢!

css inline block css-tables

7
推荐指数
1
解决办法
9088
查看次数

点击时切换背景颜色和过渡

这似乎应该很容易,但我真的找不到办法.

动画http://doir.ir/css.gif

当您单击这些相应的链接时,我需要更改和转换页面的背景颜色.我见过的最接近这种类型的过渡的是:

仅使用html5和css3演示来改变身体背景颜色

这是非常接近的,但这仅在鼠标悬停在链接上时才有效.我已经尝试将伪选择器替换为:悬停到可以想象的所有东西,但是在点击链接后没有任何东西"粘住".

基本上,我有一个链接列表,当你点击任何链接时,它会播放一首不同的歌曲(通过html5).我希望背景根据当前正在播放的歌曲进行转换.如果必要,我可以使用javascript或jquery.有什么建议?

html css css3

7
推荐指数
2
解决办法
2656
查看次数

标签 统计

css ×3

html ×2

block ×1

css-content ×1

css-tables ×1

css3 ×1

firefox ×1

inline ×1

pseudo-element ×1