如何在调整大小和缩放时修复背景图像?

时间:2016-06-07 09:20:03

标签: html css image background

我在HTML页面上添加了背景图片。我想要在所有屏幕尺寸和缩放(输入/输出)上修复它。

以下是问题的一支笔: LINK

CSS是:

body {
  color: #fff;
    background: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Live-Wallpaper-1.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
}

告诉我应该怎样接近:) xD

1 个答案:

答案 0 :(得分:2)

添加:

private async Task InitializeCameraAsync()
{
    Debug.WriteLine("InitializeCameraAsync");

    if (mc == null)
    {
        // Attempt to get the back camera if one is available, but use any camera device if not

        var allVideoDevices = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);
        //StorageFile sampleFile = await localFolder.GetFileAsync("proporties.txt");
        //String timestamp = await FileIO.ReadTextAsync(sampleFile);
        var cameraDevice = localSettings.Values["camValue"].ToString();

        if (allVideoDevices == null)
        {
            Debug.WriteLine("No camera device found!");
            return;
        }

        // Create MediaCapture and its settings
        mc = new MediaCapture();
        var settings = new MediaCaptureInitializationSettings { VideoDeviceId = allVideoDevices[int.Parse(cameraDevice)].Id };
        await mc.InitializeAsync(settings);
        //CaptureElement.RenderTransform = new ScaleTransform { ScaleX = -1 };
        //_isInitialized = true;
        SetResolution();

        DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();
        displayInfo.OrientationChanged += DisplayInfo_OrientationChanged;
        DisplayInfo_OrientationChanged(displayInfo, null);


        stream = new InMemoryRandomAccessStream();

        llmr = await mc.PrepareLowLagRecordToStreamAsync(MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Auto), stream);
        //mc.SetPreviewRotation(VideoRotation.Clockwise180Degrees);

        // mc.SetRecordRotation(rotationAngle);
        //CaptureElement.RenderTransform = new ScaleTransform()
        //{
        //ScaleX = 1
        //};
        //mc.SetPreviewMirroring(_mirroringPreview);
        //SetPreviewRotationAsync();

    ->  i want it to be VideoRotation.Clockwise360Degrees not instead Clockwise180Degrees is there any way to increas
        mc.SetRecordRotation(VideoRotation.Clockwise180Degrees);
        await llmr.StartAsync();
        await llmr.StopAsync();



        CaptureElement.Source = mc;
        CaptureElement.FlowDirection = _mirroringPreview ?  FlowDirection.LeftToRight :  FlowDirection.RightToLeft;
        CaptureStack.Visibility = Visibility.Visible;
        //if (localSettings.Values.ContainsKey("camValue") == false)
        //{
            //CameraErrorTextBlock.Visibility = Visibility.Visible;
        //}
        RecordProgress.Visibility = Visibility.Visible;
        CaptureGrid.Visibility = Visibility.Visible;
        CancelButton.HorizontalAlignment = HorizontalAlignment.Right;
        //CaptureElement.FlowDirection = FlowDirection.LeftToRight;

        //Prepare low lag recording
        stream = new InMemoryRandomAccessStream();

        //var encodingProperties = (CaptureElement.Tag as StreamResolution).EncodingProperties;
        var encodingProfile= MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Auto);
        // Calculate rotation angle, taking mirroring into account if necessary
        //var rotationAngle = VideoRotation.Clockwise180Degrees + VideoRotation.Clockwise180Degrees;
        //mc.SetRecordRotation(rotationAngle);
        //var rotationAngle = 360 - ConvertDeviceOrientationToDegrees(GetCameraOrientation());
        //encodingProfile.Video.Properties.Add(RotationKey, mc.SetRecordRotation(rotationAngle));

        llmr = await mc.PrepareLowLagRecordToStreamAsync(encodingProfile, stream);

        await mc.StartPreviewAsync();
    }
    else if (mc != null)
    {
        //if (localSettings.Values.ContainsKey("camValue") == true)
        //{
        CameraErrorTextBlock.Visibility = Visibility.Visible;
        //}
    }
}