【问题标题】:Article within the image图片内的文章
【发布时间】:2018-04-26 18:40:30
【问题描述】:

我想要一些类似的东西(带边框的东西是一张图片,文字有反色,以便于阅读)

请注意,图像是一个简单的 div 标签,将存在于其中

    <div class = "row">
        <div class = "col-md-6">
            <h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
        </div>
    </div>

但是我不知道从哪里开始。我尝试阅读引导教程,但它们提供的内容不多。我知道我没有提供任何代码来展示我的工作,但老实说,我什至不知道从哪里开始,或者搜索什么或做什么。所以我并不是真的要求一个完整的解决方案或任何东西,但如果你能指出我正确的方向,我将非常感激

【问题讨论】:

    标签: html css twitter-bootstrap-3


    【解决方案1】:

    给你

    .col-md-6{
    width:50%;
    }
    
    .image{
    position:relative;
    }
    
    
    
    .image img{
    width: 300px;
    }
    
    .text{
    position:absolute;
    top: 50%;
    left: 0;
    padding: 0 25px;
    background: rgba(255,255,255,.6);
    }
    
    .text h3, .text p{
    color:#f63;
    }
    <div class="row">
        <div class="col-md-6">
            <div class="image">
                <div class="text"><h3>Title</h3>
                <p>
                    Short and nice paragraph
                </p>
                </div>
                <img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
                </div>
        </div>
    </div>

    【讨论】:

    • 正是我想要的!无论如何,我可以像这里一样使文本反转? i.stack.imgur.com/p5ULG.png
    • 如果你想使用 css 来反转文本颜色,请访问这个link 但是,如果你想使用 java 脚本,请使用这个(最佳答案)link
    • 棒极了,流行/复古风格吧?
    • yip yip,但仍有待观察。我只是在学习如何编写 CSS,我一生都在做后端和桌面的东西,所以这个新奇的网络东西很有趣。
    【解决方案2】:

    Quillion,我不明白你的问题是什么。上面的代码应该呈现几乎你想要的东西。不过,这可能对您有所帮助:

    我将您的代码包装在主容器 .container-fluid.card 元素中,两者都可以在引导文档中找到。

    我刚刚为更宽的边框添加了一种额外的样式。你可以玩一点,应该很快就能得到你需要的风格。这是笔的链接:https://codepen.io/scheinercc/pen/pdwdvx

    希望对您有所帮助。

    <style>
        .custom-border-width-3 {
            border-width: 3px;
        }
    <style>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="card mt-2 custom-border-width-3">
                    <div class="card-body">
                        <h1>Title</h1>
                        <p>
                            Short and nice paragraph
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    【讨论】:

    • 谢谢,我希望边框部分实际上是图像,其中的文本是反色文本(以便于阅读)。抱歉解释不佳,我更新了问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-03
    • 2017-01-04
    • 1970-01-01
    • 1970-01-01
    • 2019-09-28
    • 2013-07-07
    相关资源
    最近更新 更多