Question

是否有一种无需使用import UIKit import WebKit class WebBlogViewController: UIViewController, WebServiceDelegate, WKNavigationDelegate { @IBOutlet weak var wkWebView: WKWebView! @IBOutlet weak var headLineLbl: UILabel! @IBOutlet weak var backButton: UIButton! var selectedOption = 3 var webService = WebService() var url: String = "" override func viewDidLoad() { super.viewDidLoad() wkWebView?.navigationDelegate = self webService.delegate = self } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) if let myURL = URL(string: url) { let myRequest = URLRequest(url: myURL) wkWebView?.load(myRequest) }} @IBAction func backButtonTapped(_ sender: UIButton) { if wkWebView.canGoBack { wkWebView?.goBack() } navigationController?.popViewController(animated: true) } func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { backButton?.isEnabled = wkWebView.canGoBack } }和background-image: url();即可在文字顶部创建英雄图像的方法？

也许可以通过CSS网格来完成，不确定吗？我走了这么远：

https://codepen.io/labanino/pen/NejZEy?editors=1100

Answer 1

没有position:relative和background:url()

url("https://fonts.googleapis.com/css?family=Londrina+Solid");

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  color: #fff;
  margin:0;
  padding:0;
  position:absolute;
}

.hero {
  display: flex;
  justify-content:center;
  align-items:center;
}

.hero {
  img {
    width: 100vw;
  }
}

<div class="hero">
  <h1>This is my dummy text!</h1>
  <img src="//unsplash.it/600/200" alt="">
</div>

Answer 2

为什么？在这里相对位置是最好的方法

U可以使用高度0并在文本上可见溢出

Answer 3

这可以满足您的要求：

<div class="hero">
    <h1 class="theText">This is my dummy text!</h1>
    <img class="theImage" src="//unsplash.it/600/200" alt="">
</div>

CSS：

@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');

* { 
  box-sizing: border-box; 
}
body { 
  font-family: 'Poppins', sans-serif;
  margin: 0; 
  padding: 0;
}
h1 {
  font-size: 2rem;
  color: #2F4858;
}

.hero {
    position: relative;
}

.theImage {
    position: absolute;
    width: 100vw;
    top: 0;
    z-index: -1;
}

.theText {
    position: absolute;
    top: 80px;
    width: 100vw;
    left:50%;
    margin-left: calc(-50vw);
    text-align: center;
    z-index: 1;
}

有没有一种方法可以创建不带背景图像的英雄图像，而无需使用background-image：url（）;？

3 个答案: