首页 新闻 搜索 专区 学院

这个用CSS怎么实现

0
悬赏园豆:10 [已关闭问题] 关闭于 2016-10-28 18:53

初学CSS,希望实现在图片上添加文字。

如图,我希望将标题偏移到右下角,结果用relative定位后,标题右部分会超出溢出。

下面是HTML & CSS代码,需要怎么修改呢?

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Thinking HTML5 & CSS</title>
    <link rel="stylesheet" href="think.css"/>
</head>
<body>
<div class="page">
    <div class="container">
    <main role="main">
        <div class="main-title-bkgnd">
            <!-- <img src="title.jpg"/> -->
            <h1 class="main-title">Thinking HTML5 & CSS3</h1>
        </div>
    </div>
</div>      
</body>
</html>

 

html
{
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body
{
    margin: 0;
}

img
{
    border: 0;
}

body
{
    background: #fff;
    font-size: 100%; /* 16px */
    padding-left: 15px;
    padding-right: 15px;
}

pre
{
    padding: 0px 15px;
    margin: 2px;
}
.page
{
    margin: 0 auto;
    max-width: 600px;
    background: #2b2b2b;
}

.main-title-bkgnd
{
    height: 456px;
    background-image: url(title.jpg);
}

.main-title
{
   
    -webkit-border-radius: 20px;
    border-radius: 20px 0px 0px 20px;
   
    border: 5px solid rgb(236,107,49);
    border-right: none;

    background-color: rgba(192,192,192,0.5);
    padding-left: 25px;
}

glimix的主页 glimix | 初学一级 | 园豆:154
提问于:2016-10-28 18:41
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册