javascript - 使用javascript缩小图像

Question

我需要使用 javascript.for 缩小保存在 div background-image 中的图像，因为该图像的四边具有圆角。

在javascript中可以吗？

有什么建议么 ？

Answer 1

您无法使用 JS 调整背景大小。

您可以将图像分成 4 个角图像并嵌套 div 以显示它们：

<div style="background:url(tl.jpg) top left no-repeat">
    <div style="background:url(tr.jpg) top right no-repeat">
        <div style="background:url(bl.jpg) bottom left no-repeat">
            <div style="background:url(br.jpg) bottom right no-repeat">
                content
            </div>
        </div>
    </div>
</div>

当然，如果您 div 仅在一个轴上增长，您可以简化这一点：

<div style="background:url(top.jpg) top no-repeat">
    <div style="background:url(bottom.jpg) bottom no-repeat">
        content
    </div>
</div>

Answer 2

CSS 不支持调整背景图像的大小。

如果您只是在寻找圆角，那么有多种可用的解决方案可以使用 HTML、CSS 和 Javascript 的各种组合。

谷歌：圆角

Answer 3

CSS 3 具有允许您执行此操作的 background-size 属性，但大多数浏览器不支持它。

Answer 4

大多数现代浏览器都可以让您绕过元素的角落，而无需求助于背景图像。查看以下 CSS 样式...

-moz-border-radius:4px; 
border-radius:4px; 
-webkit-border-radius:4px;

这些中的每一个都会给你一个4像素的半径。第一个是 Mozilla 浏览器（例如 Firefox），第二个是较新的 css3 浏览器，最后一个是 Safari 等。