当前位置：文江博客话题详情

使用javascript缩小图像

发布于 2024-07-19 02:03:53 字数 98 浏览 4 评论 0原文

我需要使用 javascript 缩小 div 背景图像中保存的图像。该图像的四边具有圆角。

在javascript中可以吗？

有什么建议？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不忘初心 2024-07-26 02:03:53

您无法使用 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>

You can't resize backgrounds with JS.

You can split the image up into 4 corner images and nest divs to show them all:

<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>

Of course you can simplify that if you div only grows on one axis:

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

回复收藏 0 原文

调妓 2024-07-26 02:03:53

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

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

Google：圆角

回复收藏 0 原文

意犹 2024-07-26 02:03:53

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

回复收藏 0 原文

红尘作伴 2024-07-26 02:03:53

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

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

每个样式都会为您提供 4 像素的半径。第一个是 Mozilla 浏览器（例如 Firefox），第二个是较新的 css3 浏览器，最后一个是 Safari 等。

Most modern browsers will let you round the corners of an element without resorting to background images. Check out the following CSS styles...

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

Each of these will give you a 4pixel radius. The first in Mozilla browsers (eg Firefox), the second is newer css3 browsers and the last in Safari et al.

回复收藏 0 原文

~没有更多了~