Question

我正在开展一个关于带字幕图像的小项目。

我的问题是我想将标题中的文字向右移动一点，这样就可以为它添加一些余量。问题是，当我添加保证金时：5px;对于figcaption类（Caption），背景随文本一起移动。

你们知道如何只在背景停留在同一个地方时移动文字吗？

这是我的HTML：

<!doctype html>
<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="style.css">

<script src="jquery-1.11.1.min.js"></script>

</head>

<body>

<figure class="Image"> 
<img src="images/batman.jpg" class="gallery" /> 
<figcaption class="Caption">Batman</figcaption> 
</figure>

<figure class="Image"> 
<img src="images/robin.jpg" class="gallery" /> 
<figcaption class="Caption">Robin</figcaption> 
</figure>

<figure class="Image"> 
<img src="images/superman.jpg" class="gallery" /> 
<figcaption class="Caption">Superman</figcaption> 
</figure>

<figure class="Image"> 
<img src="images/wonderwoman.jpg" class="gallery" /> 
<figcaption class="Caption">Wonder Woman</figcaption> 
</figure>

</body>

</html>

这是我的css：

.gallery {
    position: absolute;
    top: 0;
    left: 0;
}

.Image {
    height: 365px;
    width: 576px;
    position: relative;
    z-index: 1;
}

.Caption {
    display: block;
    font-size: 24px;
    width: 576px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF
}

提前感谢您的帮助！

Answer 1

在padding-left类

中使用margin-left代替.Caption

这将允许您仅将文本移动到右侧而不是整个块。

Answer 2

您应该在padding中使用margin代替.Caption。在您的示例中，您应该使用padding-left: 5px仅移动文本5px

Answer 3

您可以在box-sizing: border-box类中使用caption加填充：

.Caption {
    display: block;
    font-size: 24px;
    width: 576px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    box-sizing: border-box;
    padding-left: 5px;
}

或使用text-indent属性：

.Caption {
    display: block;
    font-size: 24px;
    width: 576px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-indent: 5px;
}

figcaption：只移动文本而不移动背景+文本

3 个答案: