- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
在应用于正在进行的应用程序之前,我正在试验一些奇特的 CSS 效果,我遇到了 Ribbons .
就其本身而言,它工作得很好,但我不会按照生成器的建议使用固定元素,所以我在主框中添加了一个图像
但是,我要添加此功能的应用程序的图像大小还不一样,所以我决定更改旧的 <img>
用于 CSS 背景图像,然后使用 background-size
属性(property)。
但有时背景图像会溢出框的尺寸。只需添加一个 overflow: hidden
即可在 #preview 中,一切都会得到解决,但如果我这样做,功能区的“曲线”就会消失。
我该如何改变它?这是当前的测试代码,尽管由于某种原因背景没有加载,既不在此处也不在 JSFiddle 中。
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
图像转到.front
因为我也打算用David Walsh's Card Fliping technique ,它已经在并行工作,我认为与案例无关。
偶数设置background-size
至 contain
使图像溢出,但这个值是不可取的,因为它不会像当前定义的值那样覆盖。
最佳答案
.front
只是一个文本容器。您需要将背景图像应用于 #preview
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.front {
color: white;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front">FRONT DIV Lorem ipsum la-la-la</div>
</div>
或者你需要为.front
定义宽度和高度:
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
height: 260px;
width: 365px;
}
.ribbon {
position: absolute;
left: -8px; top: -8px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
关于css - 背景溢出和 CSS 色带,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41346543/
我在 iPhone 上遇到了 openGL 问题,我确信一定有一个简单的解决方案! 当我加载纹理并显示它时,我得到了很多我认为所谓的“色带”,其中颜色,特别是渐变上的颜色,似乎会自动“优化”。 只是为
Android Activity 或 OpenGl 中出现 strip 图像的可能解决方案是什么。 请看下面的答案。 希望对你有帮助 最佳答案 色带已解决 ooooooooooyyyyyyyeaaaa
我有一个 working 'css ribbon tag' 但是,HTML 非常丑陋:
我想创建像这张图片(图片的红色部分)一样的丝带效果: 当我尝试创建带边框的箭头效果时,对象的形状完全被破坏了: HTML代码: Kategorija 到目前为止的 CSS 代码(没有尝试创建箭头):
在应用于正在进行的应用程序之前,我正在试验一些奇特的 CSS 效果,我遇到了 Ribbons . 就其本身而言,它工作得很好,但我不会按照生成器的建议使用固定元素,所以我在主框中添加了一个图像 但是,
我正在尝试使用 ggplot2 绘制热图,并且我想调整颜色栏的大小并增加字体。 这是代码的相关部分: g <- ggplot(data=melt.m) g2 <- g+geom_rect(aes(xm
一段时间以来,我一直在使用 this创建 Angular 丝带,到目前为止它一直运行良好: body { margin: 10% } img { border-radius: 0.5vw; }
我尝试创建 MS 功能区按钮图标表单代码。我创建了 32 bpp 的 CImage。 CImage img; img.Create(size, size, 32, CImage::createAlph
我有一个很大的表格,需要将单元格的背景更改为 1 到 6 个色带,就像矩形堆叠在一起(其他信息将出现在单元格内)。虽然这个例子是一个表格,但我猜这适用于任何 DIV。我希望能够(通过动态 javasc
我正在尝试反转这个朝阳可视化的色带。它使用带有标签等的 sunburst 可缩放图表。通常情况下,您只需反转它们正在使用的范围内的值,但我不太明白它是如何在设置中获取这些值的。 这是我使用的配色方案
我是一名优秀的程序员,十分优秀!