CSS 背景图片和背景大小 : extending the width

Question

我处于某种情况，因为我需要对 CSS 进行微小的调整，但没有触摸图形的权限。

在这种情况下，我有一个背景图像(在 Photoshop 中宽度为 461 像素)，我需要将它扩展 4-5 像素。

此图像的当前 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 属性，但如果我把它去掉并增加当前宽度，图像就会开始重复。如果我按原样保留它并增加宽度，则没有明显的变化，但使用 inspect element 宽度在技术上增加了。看这里:

我想让黑色矩形的右边在右边多延伸几个像素。

我尝试使用 background-size 但没有得到任何像样的结果。

在 Photoshop 中不修改图像宽度而扩展图像宽度的最佳解决方案是什么？

Answer 1

在你的情况下。理想的方法是使用 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;
}