我有一个我在本地开发的 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>
根据您提供的代码，这里有一种使用类似技术模仿该文本后面的灰色条纹的方法，并将其扩展到负边距，使其达到浏览器的整个宽度。只是不要使用.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句