CSS 图片库调整-6ren

CSS 图片库调整

转载作者：太空宇宙更新时间：2023-11-03 19:16:38

24

4

我需要一个简单的图片库，所以我决定完全在 CSS 上构建它，并尝试在网上找到合适的东西。我找到了一些非常接近我想要的东西，这里是应用的 CSS 样式:

<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 500px;
    color: #000000;
    font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
    color: #000000;
}

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    margin: 10px;
    padding: 0;
    float: left;
    position: relative;
    width: 120px;
    height: 100px;
}
.gallery img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
    width: 110;
    height: 90;
}
.gallery span {
    width: 77px;
    height: 27px;
    display: block;
    position: absolute;
    top: -12px;
    left: 50px;
    background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>

<body>
<ul class="gallery">
    <li><a href="#"><span></span><img src="image/8.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/9.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/4.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/7.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/5.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/6.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/3.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/1.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/2.jpg" alt="image" /></a></li>
</ul>
</body>
</html>

事实上我什至不知道为什么我需要 .gallery span{}(也许这里有一些提示)但主要问题是:图一:

enter image description here

这就是我的画廊的样子，我希望它看起来像那样，但是当我:将鼠标悬停并放大图片时，会发生这种情况

图2:

enter image description here

再放一张图说清楚

图3:

enter image description here

我需要，并且想要完成的是所有放大的图像看起来像这样:

图4:

enter image description here

但显然在缩略图前面。请提供任何帮助。

谢谢

莱伦

最佳答案

将 position: relative; 添加到你的 body 样式中，从 .gallery li 中删除 position: relative;，并添加 position: absolute;顶部:0； left: 0; to .gallery a:hover img.

你的最终 CSS 是:

    <style type="text/css">
    body {
        margin: 0 auto;
        padding: 0;
        width: 500px;
        color: #000000;
        font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
        position: relative;
    }
    a
    {
        color: #000000;
    }

    .gallery {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .gallery li {
        margin: 10px;
        padding: 0;
        float: left;
        width: 120px;
        height: 100px;
    }
    .gallery img {
        background: #fff;
        border: solid 1px #ccc;
        padding: 4px;
        width: 110;
        height: 90;
    }
    .gallery span {
        width: 77px;
        height: 27px;
        display: block;
        position: absolute;
        top: -12px;
        left: 50px;
        background: url(images/tape.png) no-repeat;
    }
    .gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
    </style>

关于CSS 图片库调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6415693/

24

4

0

文章推荐： c# - 如何在 MVC C# 项目中使用 dll 文件？

文章推荐： python - AttributeError: 'nt.stat_result' 对象没有属性 'S_IWRITE'

文章推荐： c# - 日期时间 + 计时器打勾？

HTML 图片库
我正在尝试制作一个图片库，我在使用以下代码时遇到的问题是图像不会向左浮动，因为图像大小不同。同样，当我单击图像以查看全尺寸时，它非常 pig 。有没有办法解决这个问题，或者在厨房模式下显示一半的图片。
CSS - 图片库
我正在开发一个简单的照片库/图书馆。到目前为止，我只了解 CSS。我有一个 2 x 3 的 div 网格(很快就会成为照片图标)。我想做的是给每个 div 图标一个独特的背景图像。现在我该怎么做，因
iPhone 图片库
我正在为 iPhone(照片查看器)寻找一个简单的图片库。我用的是 EasyGallery在 iOS 4 上，我在 iOS 5 下遇到这个画廊的一些问题。Three20 的画廊对我来说太复杂了，有很多
Javascript 图片库
(我的编码经验有限) 我有一个网站模板文件，目前该网站的图片库在新页面中打开，我希望图片库不要打开其他页面/选项卡，而是包含五行和一行的图片同一页面内所有行下方的大主图像，我希望用鼠标滚动时主图像会放
C 图片库
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
javascript - JS 图片库
我使用模式制作了一个图像库，因此当我单击任何图像时，它将在模式中打开，但有一个问题，我不知道为什么不起作用，任何人都可以看一下下面的代码并尝试帮助我？我认为 JavaScript 代码一切正常，但我不
带有文件夹缩略图的 jQuery 图片库
有数百个 jquery 图像 slider 示例，但找不到文件夹图像库。这是完美的候选人jquery-photo-gallery但不能创建多个组。基本上会有如下的专辑结构: -root_folder
带有类别的 Jquery 图片库
我将使用 Galleriffic jquery 插件来显示我的图像(请查看此处的演示:http://www.twospy.com/galleriffic/advanced.html 我想在图库上方包含
Jquery Li 图片库
我如何从一个不是最上面的 ul 中隐藏所有 li。代码:http://jsfiddle.net/mSmbv/375/ 我需要顶部的 li 是唯一隐藏的。所有其他的都应该隐藏起来，直到它们向上滑动进入
html - Django 图片库
我正在尝试在 Django 中制作一个图片库模板，当新图片添加到博客时，它会引入新图片。我想要的是网格中的三列或四列缩略图大小的图像。到目前为止，我的模板如下所示: {% for image in
javascript - 图片库 - 移动设备优化
所以我是 HTML、CSS、Bootstrap 和 JavaScript 的新手，我制作了这个画廊，它看起来不错，但我需要为移动设备和较小的屏幕修复它。我应该改变什么？那些#myImg4,5,12,
html - CSS 图片库
我的图库在滚动时工作正常，虽然在图像放大的部分，我希望图库中的第一张图片自动出现在那里，目前它只显示一个空白框，直到你悬停在图像上。 Welcome! M0
javascript - 图片库/缩放幻灯片
I wanted to do something similar to this. 在这种情况下，当用户单击图像时，该图像将以 100% 的浏览器高度显示，并且用户可以转到下一张/上一张图像。当用户再
用于左右导航的 jquery 图片库
我有一个使用 jquery 的图片库，我应该从头开始创建它。我无法从左右导航的一部分开始，其中它应该导航到每个图像以全 View 预览并在右侧的右侧缩略图图标上为当前所选图像提供事件类。我已经做了这
具有图像处理功能的 Javascript 图片库
谁能推荐一个好的 javascript 图片库，它具有图像处理功能，例如裁剪、旋转和缩放？我到处搜索，只找到一个或其中一个，但没有找到两者的组合。谢谢。最佳答案 StudioJS 是一个快速增长
html - 图片链接到另一张图片(图片库)
所以我基本上希望能够单击任何小图像并让它们显示在它们上方的较大图像区域中。就像一个画廊。无论如何，它可以用 HTML/CSS 做到这一点吗？这是我的代码: HTML
java - Liferay - 图片库
您好，感谢您花时间回答我的问题。我有一个带有典型文件上传 html 元素的自定义 portlet。但是，我被告知用户应该能够选择已经上传的图像而不是上传新图像。目前，我正在随机页面上加载 Web 内
c# - WPF 图片库
我将要开发一个需要向用户显示图像组的触摸屏应用程序(不是网络应用程序)。期望呈现具有页面向前/向后功能的 3x3 图像网格。他们可以选择一些，我将只展示这些图片。我没有看到 ListView 完全符
reactjs - 像亚马逊一样具有放大效果的 React 图片库
我尝试结合 react-image-gallery与 react-image-magnify获得具有放大预览效果的画廊并根据react-image-gallery我正在传递的文档 MyReactIma
javascript - 带缩略图和灯箱的 jQuery 图片库
我正在寻找一个带有水平缩略图和灯箱的 jQuery 图片库。基本上，看起来像 Steam 创意工坊的图片库:http://steamcommunity.com/sharedfiles/filedeta

首页

博学

6Ren·AI

商城

CSS 图片库调整