隐藏而不删除背景图像

发布于 2024-11-05 16:36:16 字数 167 浏览 3 评论 0原文

有没有办法在CSS中隐藏背景图像而不删除它？为了方便起见，我使用 CSS 来更改它是否显示，并依靠一个类来使其显示。因此，默认情况下，它会被隐藏，但类会让它显示。因此，背景图像无法更改。我可以使用哪些背景属性来实现此目的？将大小更改为“0 0”实际上使其左上角变为 1px - 并未完全隐藏。 CSS3 解决方案被接受。

原文

分享到QQ

分享到微博

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

发布评论

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

靖瑶 2024-11-12 16:36:17

刚刚遇到同样的问题。
我使用：

background-size: 0 0;

我认为这比使用一些 background-position 的负值更更友好。

回复收藏 0 原文

埋葬我深情 2024-11-12 16:36:17

您可以尝试将背景图像放置在可视区域之外，例如设置

background-position: -9999px -9999px

或根据可视区域设置不太剧烈的设置。

回复收藏 0 原文

岁月染过的梦 2024-11-12 16:36:17

创建一个 css 属性并使用toggleClass：

.class {
  background-image: url(...);
}

.class.toggle {
 background-image: none;
}

$('.class').toggleClass('toggle');

Create a css attribute and use toggleClass:

.class {
  background-image: url(...);
}

.class.toggle {
 background-image: none;
}

$('.class').toggleClass('toggle');

回复收藏 0 原文

揪着可爱 2024-11-12 16:36:17

background-position: -9000 -9000 我认为是最好的选择

回复收藏 0 原文

晌融 2024-11-12 16:36:17

您可以使用background-position并将其移出元素的视图。

element.class{
  background-position:-9999px;
}

或者

element.class{
  background:transparent;
}

第二个解决方案应该有效。我还没有测试过它，我不确定这是否符合“删除它”的条件。

You could use background-position and just move it out of the view of the element.

element.class{
  background-position:-9999px;
}

element.class{
  background:transparent;
}

That second solution should work. I haven't tested it and I'm not sure if that qualifies as "removing it."

回复收藏 0 原文

秉烛思 2024-11-12 16:36:17

假设您使用的是 javascript，您可以使用它来修改属性。在我在下面发布的示例中，我假设您也有 jQuery lib，如果没有直接的 DOM 操作也可以工作。我还调用您想要切换其背景图像输入节点的元素。最后这个方法使用cookie。

=>隐藏

   setCookie(inputNode.name, $(inputNode).css("background-image"),1);
   $(inputNode).css("background-image", "url()");

=>取消隐藏

$(inputNode).css("background-image",getCookie(inputNode.name));

这对我有用的地方

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}



function getCookie(c_name)
   {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
     x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)
    {
    return unescape(y);
    }
     }
    }

。希望对你有帮助。

Assuming you are using javascript, you could use that to modify the properties. In the example I am posting below I am assuming you also have jQuery lib, if not a straight up DOM manipulation would also work. I am also calling the element you wish to toggle its background image input node. And finally this method uses cookies.

=>To hide

   setCookie(inputNode.name, $(inputNode).css("background-image"),1);
   $(inputNode).css("background-image", "url()");

=>To unhide

$(inputNode).css("background-image",getCookie(inputNode.name));

Where

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}



function getCookie(c_name)
   {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
     x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)
    {
    return unescape(y);
    }
     }
    }

This worked for me. Hope helps you.

回复收藏 0 原文

十六岁半 2024-11-12 16:36:17

我认为背景位置答案可能是最好的解决方案，但我想将可见性融入其中。设置 visible:hidden 会将其从视图中删除，但保持结构完整。

回复收藏 0 原文

ゃ懵逼小萝莉 2024-11-12 16:36:17

复古网页设计的一个转折点是使用经典的 spacer.gif 来替换/隐藏背景图像。回想一下，spacer.gif 被用作布局网格系统（带有表格）的方法CSS 的早期（可怕的）日子。它是一张具有一个透明像素的单像素图像。

您可以在 21 世纪使用 spacer.gif，如下所示：

#ImageBox
{
    background: url(../images/my-regular-background.png) no-repeat center center;

    &.ImageLoaded
    {
        background-image: url(../images/spacer.gif);
    }
}

One twist on retro web design is to use the classic spacer.gif to replace/hide your background image. Recall that spacer.gif was used as a way to layout a grid system (with tables) back in the early (horrible) days of CSS. It is a one-pixel image with one transparent pixel.

You can use spacer.gif in the 21st century like this:

#ImageBox
{
    background: url(../images/my-regular-background.png) no-repeat center center;

    &.ImageLoaded
    {
        background-image: url(../images/spacer.gif);
    }
}

回复收藏 0 原文

偏闹i 2024-11-12 16:36:17

为了添加到混合中，您可以在 style 属性中放置 2 个图像，当您想要隐藏一个图像时，只需更改它们在属性中的顺序即可。这样就可以满足不操作图像的需求。

您的 hider.gif 可以是单个像素或完全不同的图像。

<!DOCTYPE html>
<html>
<head>
<style> 
bg_hidden {
    background-image: url(hider.gif), url(realImage.jpg);

}
bg_shown {
    background-image: url(realImage.jpg), url(hider.gif);
    background-repeat: repeat, repeat;
}

</style>
</head>
<body>

<div class="bg_shown">
<button onclick="this.parent.className='bg_hidden'">Hide BG</button>
</div>

</body>
</html>

我还没有检查这段代码是否有错误，所以买家要小心;-)

Just to add to the mix, you can place 2 images in the style property, and when you want to hide one, simply change the order of them in the property. This will meet the needs of not manipulating the image.

Your hider.gif can be a single pixel or a completely different image altogether.

<!DOCTYPE html>
<html>
<head>
<style> 
bg_hidden {
    background-image: url(hider.gif), url(realImage.jpg);

}
bg_shown {
    background-image: url(realImage.jpg), url(hider.gif);
    background-repeat: repeat, repeat;
}

</style>
</head>
<body>

<div class="bg_shown">
<button onclick="this.parent.className='bg_hidden'">Hide BG</button>
</div>

</body>
</html>

I haven't checked this code for bugs, so buyer beware ;-)

回复收藏 0 原文

~没有更多了~