我有一个我在本地开发的WordPress主题，旋转木马标题背后有一个黑色透明条，它将整个浏览器端到端。 CSS样式就是这样：
.carousel-title {
margin: 0 -9999rem;
background: rgba(0, 0, 0, 0.5);
font-size: 42px !important;
}
现在我需要改变它的iphone大小，因为上面的样式不是移动响应，但我不能只把上面的样式放在@media屏幕和（max-width：568px）并且称它为一天因为它将保持全尺寸浏览器的样式。这就是我的意思。我需要将文本自行包装，以便可以像文本的其他部分一样进行查看。如果我这样做：
@media screen and (max-width: 568px) {
.carousel-title {
margin: 0;
}
}
在媒体查询内部然后很好地文本包装，但字母后面的深色透明条纹变成一个块，我仍然需要看起来像横跨iphone屏幕整个宽度的横幅。
我希望这是有道理的。让我知道。
以下是生成的HTML：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Mirror and Glass</title>
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost:8888\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css' href='http://localhost:8888/wp-includes/css/dashicons.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost:8888/wp-includes/css/admin-bar.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='fawesome-css' href='http://localhost:8888/wp-content/themes/mirror_glass/assets/css/font-awesome.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='bootcss-css' href='http://localhost:8888/wp-content/themes/mirror_glass/assets/css/bootstrap.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='stylecss-css' href='http://localhost:8888/wp-content/themes/mirror_glass/style.css?ver=4.7.3' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/mirror_glass/assets/js/bootstrap.min.js?ver=4.7.3'></script>
<link rel='https://api.w.org/' href='http://localhost:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.7.3" />
<link rel="canonical" href="http://localhost:8888/home/" />
<link rel='shortlink' href='http://localhost:8888/?p=47' />
<link rel="alternate" type="application/json+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
<header class="site-header" role="banner">
<!-- NAVBAR
================================================== -->
<body class="page-template-default page page-id-47 logged-in admin-bar no-customize-support wp-custom-logo">
<div class="navbar-wrapper">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://localhost:8888/" class="custom-logo-link" rel="home" itemprop="url"><img width="222" height="97" src="http://localhost:8888/wp-content/uploads/2017/02/cropped-logo1.png" class="custom-logo" alt="" itemprop="logo" /></a> </div><!-- navbar-header -->
<h3><a href="#" class="showroom"><strong>Showroom</strong> 317.843-1204</a></h3>
<!-- We cannot leave the below as-is, we need to set the menu in the WordPress dashboard -->
<nav class="navbar-collapse collapse"><ul id="menu-primary" class="nav navbar-nav navbar-right"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8"><a title="Home" href="http://localhost:8888/">Home</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="About" href="http://localhost:8888/about/">About</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Quote" href="http://localhost:8888/sample-page/">Quote</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a title="Products" href="http://localhost:8888/products/">Products</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a title="Services" href="http://localhost:8888/services/">Services</a></li>
</ul></nav>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel3.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel3.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">One more for good measure.</h1>
<h2><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit</p>
</h2>
</div>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel2.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel2.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">Another example headline.</h1>
<h2><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</h2>
</div>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel1.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">When it Has to Be Mirror or Glass. Call Us!</h1>
<h2></h2>
</div>
</div>
</div>
</div>
<!-- Left and right Carousel Arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<!-- Images Feature Section
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<!-- <div class="container marketing"> -->
<!-- Three columns of text below the carousel -->
<section id="image-features">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Our Services ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Gallery ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Showroom Location ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
</div>
</div>
</section><!-- /.row -->
<!-- Indianapolis Feature Section
================================================== -->
<section class="row" id="indy-glass">
<div class="container">
<div class="col-md-12">
<h2>Indianapolis Mirror and Glass by Mirror Concepts, Inc.</h2>
<hr /><br>
<p class="lead">Our services include mirrors and glass, mirrored walls and doors, bath hardware and accessories, windows and custom framing choices for mirrors. We serve the greater Indianapolis, Indiana area including Fishers, Carmel, Zionville, Noblesvill, Marion, Geist, Greenwood and other areas.</p>
</div>
<div class="col-md-12 text-center">
<p><a class="btn btn-danger" href="#" role="button">Learn more ></a></p>
</div>
</div>
</section>
<!-- Testimonial Section
================================================== -->
<section class="row content-region-2 pt40 pb40" id="customer-testimonial">
<div class="container">
<div class="col-md-12">
<h2>What Our Customers Are Saying...</h2>
<p class="lead">We love Mirror Concepts! The team is professional and courteous and the new weightroom
mirrors look awesome!</p>
<cite>~ Jeff and Cindy Kivett</cite>
<p><a href="#" id="gallery">Read more ></a></p>
</div>
</div>
</section>
<!-- Social Media Section
================================================== -->
<section id="social-media-features">
<div class="container">
<div class="col-md-12">
<!-- If user uploaded an image -->
<img src="http://localhost:8888/wp-content/uploads/2017/02/facebook-icon-sm.png" alt="">
<hr />
<h2 class="social-media">What's New from Our Facebook Page</h2>
</div>
<div class="row" id="facebook-link">
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
</div>
</div>
<h4><a href="#" id="target">See more on Facebook ></a></h4>
</section>
<!-- FOOTER -->
<footer class="footer content-region-4 pt30 pb40">
<div class="container">
<div class="col-lg-12">
<a href="https://twitter.com" target="_blank" class="badge social twitter"><i class="fa fa-twitter"></i></a>
<a href="https://pinterest.com" target="_blank" class="badge social pinterest"><i class="fa fa-pinterest"></i></a>
<a href="https://facebook.com" target="_blank" class="badge social facebook"><i class="fa fa-facebook"></i></a>
</div>
<div class="col-md-12">
<p>Mirror Concepts, Inc. 950 3rd Ave. S.W., Carmel, IN 46032, 317-843-1204</p>
<p>Showroom Hours: Monday-8a-5p Monday-Friday | Saturday and Evenings by Appointment</p>
<p> Copyright © 2017 Mirror Concepts, Inc. | Website by MediaFuel</p>
</div>
</div>
</footer>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/admin-bar.min.js?ver=4.7.3'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/wp-embed.min.js?ver=4.7.3'></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain)
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<!--<![endif]-->
<div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost:8888/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/">Mirror and Glass</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost:8888/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost:8888/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost:8888/wp-admin/nav-menus.php">Menus</a> </li></ul></div> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F">Customize</a> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://localhost:8888/wp-admin/update-core.php" title="1 Plugin Update"><span class="ab-icon"></span><span class="ab-label">1</span><span class="screen-reader-text">1 Plugin Update</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost:8888/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost:8888/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-bcarousel"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=bcarousel">Carousel Option</a> </li>
<li id="wp-admin-bar-new-images_feature"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=images_feature">Image Feature</a> </li>
<li id="wp-admin-bar-new-social_media_feature"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=social_media_feature">Social Media Feature</a> </li>
<li id="wp-admin-bar-new-testimonial"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=testimonial">Testimonial</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost:8888/wp-admin/user-new.php">User</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost:8888/wp-admin/post.php?post=47&action=edit">Edit Page</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8888/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/profile.php">Howdy, admin<img alt='' src='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=26&d=mm&r=g' srcset='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=52&d=mm&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost:8888/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=64&d=mm&r=g' srcset='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost:8888/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=ce320a9d17">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=ce320a9d17">Log Out</a>
</div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</body>
</html>
答案 0 :(得分：3)
根据您提供的代码，这里有一种用类似技术模仿该文本背后的灰色条纹的方法，并将其扩展到负边距，使其达到浏览器的全宽。只是不要使用.carousel-title元素绘制背景，并使用基于该元素的伪元素来代替它。
.carousel-title {
margin: 0 -9999rem;
font-size: 42px !important;
background: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 568px) {
.carousel-title {
margin: 0;
position: relative;
background: none;
}
.carousel-title:after {
content: '';
background: rgba(0, 0, 0, 0.5);
left: -9999px; right: -9999px;
top: 0; bottom: 0;
position: absolute;
}
}<h1 class="carousel-title">Another example headline.</h1>