具有背景img问题的Bootstrap容器
我有一些简单的HTML和CSS代码，其中我想要一个带有类容器的div，并且该div需要以img作为背景。在该父div内，我有一个关于row的潜水课，里面有2个div类：class =“ col-md-3”和col-md-9。
问题在于，现在子div不再显示容器div。
换句话说，我希望我的容器div为背景，所有内容都显示在它的顶部。
有什么建议吗？
HTML：
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>here is test for the me</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
CSS：
body, html {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("../images/backg.png");
background-size: contain;
background-repeat: no-repeat;
padding-top: 66.64%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
实际结果：
3 个答案:
答案 0 :(得分：1)
您的意思是这样的吗？
设置容器package com.creighton.adh81910.creighton_navigation;
import android.content.Context;
import android.location.Location;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatDelegate;
import android.view.SearchEvent;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.mapbox.api.directions.v5.DirectionsCriteria;
import com.mapbox.api.directions.v5.MapboxDirections;
import com.mapbox.services.;
import com.mapbox.android.core.;
import com.mapbox.services.android.navigation.ui.v5.NavigationLauncherOptions.*;
import com.mapbox.android.core.location.LocationEngine;
import com.mapbox.android.core.location.LocationEngineListener;
import com.mapbox.android.core.location.LocationEnginePriority;
import com.mapbox.android.core.location.LocationEngineProvider;
import com.mapbox.android.core.permissions.PermissionsListener;
import com.mapbox.android.core.permissions.PermissionsManager;
import com.mapbox.geojson.Point;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.annotations.Marker;
import com.mapbox.mapboxsdk.annotations.MarkerOptions;
import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.plugins.locationlayer.LocationLayerPlugin;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.plugins.locationlayer.modes.CameraMode;
import com.mapbox.mapboxsdk.plugins.locationlayer.modes.RenderMode;
import com.mapbox.services.android.navigation.ui.v5.NavigationLauncher;
import com.mapbox.services.android.navigation.ui.v5.NavigationLauncherOptions;
import com.mapbox.services.android.navigation.ui.v5.route.NavigationMapRoute;
import com.mapbox.services.android.navigation.v5.navigation.NavigationRoute;
import com.mapbox.api.directions.v5.models.DirectionsResponse;
import com.mapbox.api.directions.v5.models.DirectionsRoute;
import com.mapbox.services.android.navigation.v5.utils.LocaleUtils;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import android.util.Log;
import java.security.acl.Permission;
import java.util.List;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, LocationEngineListener, PermissionsListener, MapboxMap.OnMapClickListener {
private MapView mapView;
private MapboxMap map;
private Button startButton;
private PermissionsManager permissionsManager;
private LocationEngine locationEngine;
private LocationLayerPlugin locationLayerPlugin;
private Location originLocation;
private Point originPosition;
private Point destinationPosition;
private Marker destinationMarker;
private NavigationMapRoute navigationMapRoute;
private static final String TAG = "MainActivity";
private DirectionsRoute currentRoute;
private MapboxDirections mapboxDirections;
private MapboxDirections.Builder directionsBuilder;
// Used to load the 'native-lib' library on application startup.
static {
System.loadLibrary("native-lib");
}
@override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Mapbox.getInstance(this, "pk.eyJ1IjoiYWRoYXJtYXZhcmFwdSIsImEiOiJjampzdXBkMW4wY25jM3BtcnUzNGpwdTA4In0.qN9Y1LoHxPaONtXLp7rBCw");
setContentView(R.layout.activity_main);
mapView = (MapView) findViewById(R.id.mapView);
startButton = findViewById(R.id.startButton);
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(this);
startButton.setOnClickListener(new View.OnClickListener() {
@override
public void onClick(View v) {
boolean simulateRoute = true;
NavigationLauncherOptions options = NavigationLauncherOptions.builder()
.directionsRoute(currentRoute)
.shouldSimulateRoute(simulateRoute)
.build();
NavigationLauncher.startNavigation(MainActivity.this, options);
}
});
// Example of a call to a native method
//TextView tv = (TextView) findViewById(R.id.sample_text);
//tv.setText(stringFromJNI());
}
@override
public void onMapReady(MapboxMap mapboxMap) {
map = mapboxMap;
map.addOnMapClickListener(this);
enableLocation();
}
private void enableLocation() {
if (PermissionsManager.areLocationPermissionsGranted(this)) {
initializeLocationEngine();
initializeLocationLayer();
} else {
permissionsManager = new PermissionsManager(this);
permissionsManager.requestLocationPermissions(this);
}
}
private void initializeLocationEngine() {
locationEngine = new LocationEngineProvider(this).obtainBestLocationEngineAvailable();
locationEngine.setPriority(LocationEnginePriority.HIGH_ACCURACY);
locationEngine.activate();
Location lastLocation = locationEngine.getLastLocation();
if (lastLocation != null) {
originLocation = lastLocation;
setCameraPosition(lastLocation);
} else {
locationEngine.addLocationEngineListener(this);
}
}
private void initializeLocationLayer() {
locationLayerPlugin = new LocationLayerPlugin(mapView, map, locationEngine);
locationLayerPlugin.setLocationLayerEnabled(true);
locationLayerPlugin.setCameraMode(CameraMode.TRACKING);
locationLayerPlugin.setRenderMode(RenderMode.NORMAL);
}
private void setCameraPosition(Location location) {
map.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(location.getLatitude(), location.getLongitude()), 17));
}
@override
public void onMapClick(@nonnull LatLng point) {
destinationMarker = map.addMarker(new MarkerOptions().position(point));
destinationPosition = Point.fromLngLat(point.getLongitude(), point.getLatitude());
originPosition = Point.fromLngLat(originLocation.getLongitude(), originLocation.getLatitude());
getRoute(originPosition, destinationPosition);
startButton.setEnabled(true);
startButton.setBackgroundResource(R.color.mapbox_blue);
}
private void getRoute(Point origin, Point destination) {
NavigationRoute.builder(getApplicationContext())
.accessToken(Mapbox.getAccessToken())
.origin(origin)
.destination(destination)
.build()
.getRoute(new Callback() {
@override
public void onResponse(Call call, Response response) {
if (response.body() == null) {
Log.e(TAG, "No routes found, check right user and access token");
return;
} else if (response.body().routes().size() == 0) {
Log.e(TAG, "No routes found");
return;
}
currentRoute = response.body().routes().get(0);
if (navigationMapRoute != null) {
navigationMapRoute.removeRoute();
} else {
navigationMapRoute = new NavigationMapRoute(null, mapView, map);
}
navigationMapRoute.addRoute(currentRoute);
}
@Override
public void onFailure(Call<DirectionsResponse> call, Throwable t) {
Log.e(TAG, "Error" + t.getMessage());
}
});
}
@override
@SuppressWarnings("MissingPermission")
public void onConnected() {
locationEngine.requestLocationUpdates();
}
@override
public void onLocationChanged(Location location) {
if (location != null) {
originLocation = location;
setCameraPosition(location);
}
}
@override
public void onExplanationNeeded(List permissionsToExplain) {
//Present Dialog
}
@override
public void onPermissionResult(boolean granted) {
if (granted) {
enableLocation();
}
}
@override
public void onRequestPermissionsResult(int requestCode, @nonnull String[] permissions, @nonnull int[] grantResults) {
permissionsManager.onRequestPermissionsResult(requestCode, permissions, grantResults);
}
@override
public void onStart() {
super.onStart();
if (locationEngine != null) {
locationEngine.requestLocationUpdates();
}
if (locationLayerPlugin != null) {
locationLayerPlugin.onStart();
}
mapView.onStart();
}
@override
public void onResume() {
super.onResume();
mapView.onResume();
}
@override
public void onPause() {
super.onPause();
mapView.onPause();
}
@override
public void onStop() {
super.onStop();
if (locationEngine != null) {
locationEngine.removeLocationUpdates();
}
if (locationLayerPlugin != null) {
locationLayerPlugin.onStop();
}
mapView.onStop();
}
@override
public void onLowMemory() {
super.onLowMemory();
mapView.onLowMemory();
}
@override
protected void onDestroy() {
super.onDestroy();
if (locationEngine != null) {
locationEngine.deactivate();
}
mapView.onDestroy();
}
@override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mapView.onSaveInstanceState(outState);
}
/**
A native method that is implemented by the 'native-lib' native library,
which is packaged with this application.
*/
public native String stringFromJNI();
public static final class Builder {
private final MapboxDirections.Builder directionsBuilder;
private Builder() {
directionsBuilder = MapboxDirections.builder();
}
public Builder Profile(@NonNull @DirectionsCriteria.ProfileCriteria String profile) {
directionsBuilder.profile(profile);
return this;
}
public static Builder builder(Context context) {
return builder(context, new LocaleUtils());
}
static Builder builder(Context contect, LocaleUtils localeUtils) {
return new Builder()
.Profile(DirectionsCriteria.PROFILE_WALKING);
}
}
}
并删除填充，它将div推到底部
height: 100vh;@charset "utf-8";
/* CSS Document */
body,hmtl{
background-color: #071a0f;
margin: 0;
}
h1{
color: aqua;
}
.bckgroud{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
background-size: contain;
background-repeat: no-repeat;
}
答案 1 :(得分：1)
也许是这样的
body {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
height: 100vh;
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
background-repeat: no-repeat;
}
答案 2 :(得分：1)
body, html {
color: white !important;
}
.bckgroud{
background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
<div class="row">
<div class="col-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-9">
Foo
</div>
</div>
</div>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？