CSS背景图像和背景大小：扩大宽度

我处于某种情况，因为我需要进行较小的CSS调整，但没有触摸图形的权限。在这种情况下，我有一个背景图像（在Photoshop中有一个461px的宽度），我需要扩大它4-5像素。CSS背景图像和背景大小：扩大宽度

对CSS此图片的电流为：

#screenvolumeslidermenu{ 
    background:url(../html_cmi/lopa/volume_bg_overlay.png) no-repeat; 
    background-size:100%; 
    width:461px; 
    height:51px; 
    position:fixed; 
    z-index:15; 
    top:678px; 
    left:70px; 
    display:none; 
}

它最初并未有no-repeat财产，但如果我采取出来，只是增加当前宽度，图像将开始重复。如果我按原样放置并增加宽度，则不会发生可见的变化，但使用检查元素的宽度在技术上会增加。看到这里： enter image description here

我想在黑色矩形的右侧扩展一些像素在右侧。

我尝试使用background-size，但没有得到任何体面的结果。

这里最好的解决方案是扩展图像宽度而不用在Photoshop中触摸它？

来源

2014-01-27 DnfD

由于您的图片左侧的箭头与背景的其余部分相结合，因此没有办法使用CSS来处理此问题。如果你想避免使用Photoshop，唯一可以做的就是添加一个相邻的背景元素，并将其设置为相同的样式，但这真的很黑。 –

嗯，我明白了。所以箭头正在把所有东西搞砸，或多或少？ – DnfD

在你的情况。理想的方法是使用CSS创建整个事物。创建主矩形并使用:before和:after创建具有边框样式的箭头。 Check this site out

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-right-color: #88b7d5; 
    border-width: 30px; 
    margin-top: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-right-color: #c2e1f5; 
    border-width: 36px; 
    margin-top: -36px; 
}

来源

2014-01-27 18:27:17

我尽可能只使用CSS，并且您链接的网站非常棒。作为一个很好的解决方案给予upvote，但不幸的是我需要使用背景图像。 – DnfD

如果你真的陷入困境，你可能想尝试在image元素之后添加一个额外的元素。样式相同，给它一个你需要的宽度和'位置：绝对'它在图像的末尾。 –

1）背景的尺寸可以接受两个值，例如

background-size: 200% 100%;

应该让你伸展只有一个尺寸（可以使用像素太）。 2）如果您不想触摸比例，请考虑创建另一个具有相同背景图像，但与右边缘对齐的较窄元素，并将其放置在第一个元素上，并对齐到右侧。然后通过像滑尺一样移动右边的一块，就可以改变整体宽度而不会扭曲图形。

来源

2014-01-27 18:29:18

我会尝试一下，让你知道它是如何去。感谢您提供建设性的答案。 – DnfD

CSS背景图像和背景大小：扩大宽度

回答

相关问题