<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Home | Dr.PRB</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
<link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
<style type="text/css">
.hidden.menu {
display: none;
}
.masthead.segment {
min-height: 700px;
padding: 1em 0em;
}
.masthead .logo.item img {
margin-right: 1em;
}
.masthead .ui.menu .ui.button {
margin-left: 0.5em;
}
.masthead h1.ui.header {
margin-top: 3em;
margin-bottom: 0em;
font-size: 4em;
font-weight: normal;
}
.masthead h2 {
font-size: 1.7em;
font-weight: normal;
}
.ui.vertical.stripe {
padding: 8em 0em;
}
.ui.vertical.stripe h3 {
font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
clear: both;
}
.ui.vertical.stripe p {
font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
margin: 3em 0em;
}
.quote.stripe.segment {
padding: 0em;
}
.quote.stripe.segment .grid .column {
padding-top: 5em;
padding-bottom: 5em;
}
.footer.segment {
padding: 5em 0em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
@media only screen and (max-width: 700px) {
.ui.fixed.menu {
display: none !important;
}
.secondary.pointing.menu .item,
.secondary.pointing.menu .menu {
display: none;
}
.secondary.pointing.menu .toc.item {
display: block;
}
.masthead.segment {
min-height: 350px;
}
.masthead h1.ui.header {
font-size: 2em;
margin-top: 1.5em;
}
.masthead h2 {
margin-top: 0.5em;
font-size: 1.5em;
}
}
</style>
<script src="assets/library/jquery.min.js"></script>
<script src="../dist/components/visibility.js"></script>
<script src="../dist/components/sidebar.js"></script>
<script src="../dist/components/transition.js"></script>
<script>
$(document)
.ready(function() {
// fix menu when passed
$('.masthead')
.visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function() {
$('.fixed.menu').transition('fade out');
}
})
;
// create sidebar and attach to menu open
$('.ui.sidebar')
.sidebar('attach events', '.toc.item')
;
})
;
</script>
</head>
<body>
<!-- Following Menu -->
<div class="ui large top fixed hidden menu">
<div class="ui container">
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
</div>
<!-- Sidebar Menu -->
<div class="ui vertical inverted sidebar menu">
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
<!-- Page Contents -->
<div class="ui inverted vertical masthead center aligned segment" background="assets/images/dentistplace.jpg">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
</div>
<div class="ui text container">
<h1 class="ui inverted header">
Imagine-a-Company
<img src="">
</h1>
<h2>Do whatever you want when you want to.</h2>
<div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
</div>
</div>
<div class="ui vertical stripe segment" >
<div class="ui middle aligned stackable grid container">
<div class="row">
<div class="eight wide column">
<h3 class="ui header">We Provide Quality Services</h3>
<p>We assure you the highest quality of dental treatment plan with the right and best equipments in the field of dentistry. We treat our customers with satisfaction serving them great food and beverages while waiting for their appointment.</p>
<h3 class="ui header">We Value Our Patients</h3>
<p>We always listen to our patients concern, and perform the highest quality of diagnostic procedure in order to provide the best quality of treatment for their needs.</p>
</div>
<div class="six wide right floated column">
<img src="assets/images/dentistplace.jpg" class="ui large bordered rounded image">
</div>
</div>
<div class="row">
<div class="center aligned column">
<a class="ui huge button" href="services.html">Check Them Out</a>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe quote segment">
<div class="ui equal width stackable internally celled grid">
<div class="center aligned row">
<div class="column">
<h3>"They keep their promise in giving the quality of service."</h3>
<p>Anonymous</p>
</div>
<div class="column">
<h3>"If not the best. One of the best!"</h3>
<p>
<img src="assets/images/avatar/tom.jpg" class="ui avatar image"> <b>Mark Acdan</b> 3rd Year Computer Science Student
</p>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header">Different types of Dental Fillings</h3>
<p>You are maybe know that there are only one type of dental filling and that is mostly termed as <b>'Pasta'</b>. But did you know that there are various types of dental fillings? Check it out now!</p>
<a class="ui large button">Read More</a>
<h4 class="ui horizontal header divider">
<a href="#">Trivias</a>
</h4>
<h3 class="ui header">Types of Braces</h3>
<p>Yes I know you probably heard about braces because they're quite the trend now these days. But did you know that there are different of braces that depends on the case of the patient.</p>
<a class="ui large button">Read More</a>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui stackable inverted divided grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
<a href="#" class="item">Site Map</a>
<a href="#" class="item">Services</a>
<a href="#" class="item">FAQ</a>
<a href="#" class="item">Developers</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
<a href="#" class="item">Tooth Extraction</a>
<a href="#" class="item">Airway and Dental Sleep Medicine</a>
<a href="#" class="item">Craniofacial Pain</a>
<a href="#" class="item">TMJ Dysfunctional Management</a>
</div>
</div>
<div class="ten wide column">
<center>
<h4 class="ui inverted header">Dr. Pamela B. Rivera</h4>
<p>Specialized in Airway and Dental Sleep Medicine | Craniofacial Pain | TMJ Dysnfunctional Management</p>
</center>
</div>
</div>
<div class="ui inverted section divider"></div>
<img src="assets/images/dentlogo.png" class="ui centered mini image">
<div class="ui horizontal inverted small divided link list">
<a class="item" href="#">Site Map</a>
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Terms and Conditions</a>
<a class="item" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</body>
</html>
所以我是Semantic UI的新手，我正在尝试使用主页，我想要更改顶部黑色的背景图像。 不是导航栏，而是整个黑色就像Semantic UI网站中的整个东西一样。希望你能帮我！
答案 0 :(得分：3)
从background="assets/images/dentistplace.jpg"
<div class="ui inverted vertical masthead center aligned segment"
将landing-image添加到该div的样式列表中。 landing-image是一个类名，您可以为任何名称命名。
在页面样式中定义landing-image类。你可以把它放在.masthead.segment {
像这样定义landing-image：
.landing-image {
background-image: url('assets/images/dentistplace.jpg') !important;
background-size: cover !important;
}
答案 1 :(得分：1)
请勿在标头中使用<img src="yourimage.jpg />。只需在样式标记
.masthead {
background-image: url('bg.jpg') !important;
background-size: cover !important;
}
这会对你有所帮助！