Question

我无法将文字放入包裹在半透明形状内的旋转木马中。请参阅此图片：slider1.png我正在尝试在Bootstrap中重新创建。我已经走到了这一步（见代码），但是有一些问题我不知道如何解决：文本没有包裹在透明的形状中，并且还需要创建透明的形状以使其具有响应性。我不知道该怎么办。请帮助：）

来自Vishal Panara的

更新代码：现在需要对旋转木马标题中的标题进行调整，以便将其放在同一条线上。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" >
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
</head>
<body>
 <body class="calibre">
<div class="content container">
  <div class="row">
    <section class="col-sm-12">
    <div class="carousel slide hidden-xs" id="summary">
  <ol class="carousel-indicators">
    <li data-target="#summary" data-slide-to="0" class="active"></li>
    <li data-target="#summary" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
     <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="Step 1: Test">
      <div class="carousel-content right-caption">
        <h3>Step 1:<h3> <h6><i>Test</i></h6>
        <p><br></p>
        <big><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Orci non varius consectetur, risus enim accumsan massa, vitae mollis purus neque ac odio. Aliquam viverra vestibulum.</p>
            <p><i>Geget facilisis ligula blandit eu!</i></p></big>
     </div>
    </div>
  <div class="item">
     <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="Step 2: Test">
  <div class="carousel-content right-caption">
    <h3>Step 2:<h3> <h6><i>Test</i></h6>
        <p><br></p>
        <big><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Orci non varius consectetur, risus enim accumsan massa, vitae mollis purus neque ac odio. Aliquam viverra vestibulum.</p>
        <p><i>Geget facilisis ligula blandit eu!</i></p></big>
      </div>
  </div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

css：

.carousel-content {
 position: absolute;
 top: 10%;
 right: 1%;
 background-color: rgba(0, 0, 0, 0.8)!important;
 color:#fff;
 width: 32%;
 padding: 4rem;
}

h6 {
  font-family: 'Pacifico', cursive;
  font-size: 35px;
}

Answer 1

<script type="text/javascript">

e = canResizeFlash();
var so = new SWFObject("swf/player.swf", "mymovie", "100%", "100%", "9.0.0", "swf/expressinstall.swf");
so.addParam("wmode", "transparent");
so.addVariable("allowResize", e);
so.addParam("menu", "false");
so.addParam("quality", "high");
so.write("playerSidebar");

</script>

<a href="audio source.mp3" onclick="this.className='listenMp3 listenMp3Ascultat'; return false;" title="Track title" class="listenMp3">
<strong>Track title</strong></a>

Answer 2

我想我会在这个上写下来并给你一些关于bootstrap carousel的提示。首先，当你添加字体时，你的字体在同一行，但文字是不同的大小，所以它看起来不同。你也有一个h3并且随后你有一个h6。这是非常糟糕的做法，h标签真的应该从h1，h2，h3等顺序进行。所以你可以做的是将测试文本放在h3中，然后将它包装在一个跨度，然后用你的专用字体。然后，您可以只在<big>标记中添加一个类，并在css中设置样式，而不是添加<i>和<p>标记，这对于html5来说会更容易和正确。

我发现您希望对此进行响应，因此您需要向css添加媒体查询，以便在较小的屏幕上为.carousel-content提供不同的宽度。

另外，您可能需要考虑使旋转木马本身具有响应性。我通常在.carousel .item添加填充底部，然后为其添加最小高度。然后，而不是使用图像使用每个项目的背景。这样做的原因是因为许多图像的大小和重新分辨率不同，当您切换幻灯片时，您的旋转木马会出现问题。你不需要使用这个建议，但我想我会给你选择，因为它对于响应式设计来说要好得多。

以下是行动Fiddle Demo

中的一个小提琴

所以你的html看起来如下：

<div class="carousel slide" id="summary">
  <ol class="carousel-indicators">
    <li data-target="#summary" data-slide-to="0" class="active"></li>
    <li data-target="#summary" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
     <div class="carousel-content right-caption">
       <h3>Step 1: <span>Test</span></h3>
       <p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       <p>Orci non varius consectetur, risus enim accumsan massa, vitae mollis purus neque ac odio. Aliquam viverra vestibulum.</p>
       <p class="italic">Geget facilisis ligula blandit eu!</p>
     </div>
    </div>
    <div class="item">
     <div class="carousel-content right-caption">
       <h3>Step 1: <span>Test</span></h3>
       <p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       <p>Orci non varius consectetur, risus enim accumsan massa, vitae mollis purus neque ac odio. Aliquam viverra vestibulum.</p>
       <p class="italic">Geget facilisis ligula blandit eu!</p>
     </div>
    </div>
   </div>
 </div>

你的Css将如下所示：

.italic{
  font-style: italic;
}
.carousel-content {
 position: absolute;
 top: 10%;
 right: 1%;
 background-color: rgba(0, 0, 0, 0.8)!important;
 color:#fff;
 width: 32%;
 padding: 4rem;
}
.carousel-content h3 span{
  font-family: 'Pacifico', cursive;
}
@media screen and (max-width:767px){
  .carousel-content{font-size:12px;width:80%;}
}

#summary .item{
  background-position:center !Important;
  background-size:cover !Important;
  padding-bottom:50%;
  min-height:375px;
}
#summary .item:nth-of-type(1){
  background:url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg')
}
#summary .item:nth-of-type(2){
  background:url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg')
}

Answer 3

复制以下代码，将两者放在一行。

<div class="head">
    <p>Step 1: <span><i>Test</i> </span></p>
    </div>

.head>p>span{font-family: 'Pacifico', cursive; font-size: 35px;} .head>p{ font-size: 24px;}

在bootstrap轮播中以透明形状包裹文本

3 个答案: